Force Footer to the Bottom of the Page the Simple Way

I’ve frequently ran into an issue with footers on web pages where there is not enough content to push the footer to the bottom of the screen, or below it. What you get is a footer sitting in the middle of your page, and it just looks bad.

It’s easy to give the footer a fixed position, which will solve the problem on pages that don’t have enough content. The issue I have with this is that the footer is then always visible, which looks bad on pages with more content.

So what we want to do is push the footer to the bottom of the page only if the height of our page content is less than the height of the display.

When you do a search, you’ll get tons of answers on how to do this with jQuery or a bunch of CSS rules. I found that most of the solutions seemed overly complex for what seems like a simple problem. I finally found one solution that fixes the problem with only two lines of CSS.

The HTML

First wrap all of your main content in a div element and give it a class of “wrapper” (or call it whatever you want).

<body>
    <div class="wrapper">
        <h1>Main Content</h1>
    </div>
    <footer>
        <p>Footer Content</p>
    </footer>
</body>

The CSS

Now, make sure you give your footer a height.

Then use the calc() function to set the height of your wrapper equal to the height of the viewport (display), minus the height of the footer.

.wrapper {
    min-height: calc(100vh - 50px);
}
footer {
    height: 50px;
}

Now, if you have extra margins on your wrapper content you will have to increase the amount of pixels you subtract from the viewport height to reflect that. Other than that, this is a super easy and quick fix. No javascript needed, and only two CSS rules.

How to Round to the Nearest 5 Cents (Nickel) With PHP

rounding with php

I was working on a pricing calculator in PHP and I needed to round the total to the nearest five cents, since my country got rid of pennies some years ago.

For example:

$2.23 should get rounded to $2.25

$2.21 should round to $2.20

$2.28 should round to $2.30

and so on…

Oddly enough, I didn’t find a whole lot of answers online explaining how to solve this seemingly simple problem.

So I decided to post my solution here in case someone comes across the same problem.

First we store the cost in the variable:

$cost = 27.2345567;

Then we pass the cost divided by 0.05 into the round function and multiply it by 0.05. This gives us our rounded value which we can store in a variable we’ll nameround_num.

$round_num = round($cost / 0.05) * 0.05;

That will round whatever number you assign to the cost variable to the nearest 5 cents.

This won’t display zero values, so 2.20 will be displayed as 2.2 and 2.00 will be displayed a 2.

To fix this, and make our numbers display consistently, we can use PHP’s number_format function like so:

number_format($round_num, 2);

The number_format function takes two arguments separated by a comma. The first argument is the number we want to format, which is our rounded number. The second argument is the number of decimal places we want to show. In this case we say 2 because that is the convention for pricing.

Here is the whole script, where we echo out the final cost at the end:

$cost = 27.2345567;
$round_num = round($cost / 0.05) * 0.05;
echo number_format($round_num, 2);

I am sure there is a more elegant way to do this, and by all means, post it in the comments.

But it works, and is pretty simple. So if you are like me and trying to solve this problem, maybe you will find this useful.

How to Install a LAMP Stack on a Raspberry Pi

 the lamp stack

A LAMP stack is a suite of development tools, which stands for Linux, Apache, MySQL and PHP. Each of these components serves its own purpose: Linux is the operating system, Apache is the web server, MySQL is the database and PHP is the programming language.

In this quick tutorial we’ll cover how to install a LAMP stack on a Raspberry Pi.

Note that I am using the latest (at the time of writing this) version of Raspbian: Stretch. If you are using older versions of Raspbian you may need to tweak some of these steps slightly, or upgrade your distribution.

1.) Update Raspbian Operating System

Type these commands in the terminal:

sudo apt-get update
sudo apt-get upgrade

Note that each of these commands will take a while to process. Especially on wifi. The upgrade in particular can take more than an hour, so go do some laundry or something and just keep checking back in.

2.) Install Apache

sudo apt-get install apache2 –y

3.) Test the Web Server

On successful installation, a default HTML page will appear in the root web folder:

/var/www/html

You can navigate to that directory in the terminal by typing:

cd /var/www/html

And then typing in the following command to see the files in that directory:

ls

You should then see the index.html file listed.

You can view this page on a web browser either from the Pi itself or from another computer on the same network.

From the Pi, open the web browser and type http://localhost in the address bar.

From another computer on the same network, type in the Pi’s IP address in the address bar of your web browser.

If you don’t know your Pi’s IP address, check out my quick tutorial on how to do this.

If everything went right, you should see a page like this:

Apache default page

 

4.) Install PHP

Run this command in the terminal:

sudo apt-get install php libapache2-mod-php –y

5.) Install MySQL

Run this command in the terminal:

sudo apt-get install mysql-server php5-mysql -y

6.) Restart Apache

sudo service apache2 restart

That’s it!

You now have your own local Raspberry Pi web server you can use to develop your web projects or tinker around.

If you have questions, let me know in the comments.