Question

I have a page which I can’t seem to get right in terms of a few styling details.

http://www.comehike.com/earn_money.php

It has two problems with it that I can’t seem to get right (largely because design and styling are my Achilles heal).

Problem 1: at the bottom, the footer div sticks out to the right. I tried wrapping it in diff divs, and looking via FireBug, but can’t seem to get it to stop sticking out….possibly because I am tired and brain dead 🙂

Problem 2: Do you see how the main page div ends above the footer and div? Is there way to make the main area of the page extend below the footer?

Thanks!

Answer 1

Problem #1:

Looks like you want your footer to be 960 pixels wide. But you have a 10 pixel white border which actually makes the footer 980 pixels wide. Remove the border and your footer will again be 960 pixels as you designed. Then it appears you’ll have to tweak width: 960px; until it fits properly. 950px seems to work well.

.footer{
    width: 960px;
    padding: 0.5em 0;
    margin: 0 auto;
    margin-bottom: 20px;  
    text-align: center;
    vertical-align:center;
    background: #fff;
    color: #462c1f;
    border: 10px solid #fff;  
}

Should be…

.footer{
    width: 950px; /* adjust the width to fit */
    padding: 0.5em 0;
    margin: 0 auto;
    margin-bottom: 20px;  
    text-align: center;
    vertical-align:center;
    background: #fff;
    color: #462c1f;
}

Problem #2:

You need to put the banner’s <div> and <div class="footer">...</div> inside of and near the bottom of <div class="basic">...</div>