6-CSS Footer

Video

Footer CSS Code

Next, let's add some CSS for the Footer and put that thing back where it came from or so help me! Monster's Inc. anyone?

Let's start with the following code:

footer {
    background-color: #40362f;
    height: 25px;
    font-size: 1.2em;
    color: #fff;
    width: 100%;
    text-align: center;
    padding: 1.5em 2.0em;
}
footer ul#menuFooter {
    display: inline-block;
    list-style: none;
    margin: 0 0 0 0.6em;
    padding: 0;
}
footer ul li {
    display: inline-block;
    padding: 0 0.7em 0 0;
    margin: 0;
}
footer ul li::before {
    content: "| ";
    padding-right: 0.7em;
}
footer a, footer a:visited {
    color: #fff;
    text-decoration: none;
}
footer a:hover {
    color: #fff;
    text-decoration: underline;
}

Run the app

If we run the app at this point, we'll notice that the Nav for the Footer still isn't sticking to the bottom.

HTML Addition

Go into the index.html file and add the following code, right above the footer:

    <div class="clear"></div>
    <!--Start of Footer code-->    
    <footer>

CSS for clear

Then, we'll add the CSS for the footer code. This can go right above the header declaration:

div.clear { 
    clear:both;
    font-size: 1%;
}

/*Header*/
header {

In the future we'll learn ways to position this at the bottom, but for now we'll follow Gary's quick trick here. It's a nice way to see how you can use divs to make things stick.

Run the App

Now when we run it, we'll see this:

That pesky footer is now at the bottom of the page where it belongs with spacing after the main section. Let's finish up with some inspiration to make the store look better.