Need styling help - one div sticks out to the side.

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 pag开发者_StackOverflowe div ends above the footer and div? Is there way to make the main area of the page extend below the footer?

Thanks!

For the first part of your question, you can fix it by simply removing the width property on your footer, since it's a block element, and it will occupy 100% of the available width (after padding/margin/etc).

For the second part of your question, I'm not quite sure what you're asking, but I think you would change the style on #mainBody to be: padding: 5px 5px 20px; or some other large number for the third value?

1. Take width off of the footer's CSS.

2. If you want the footer to be within the main page, you have to position it within .basic

Set footer div width to 900px from 960 will fix footer sticking out

width: 900px;

problem2. The layout is correct how it should be. This is how the layout is

<div>
   <div class="basic">
   <div> <-- google ads
   <div> <-- footer
</div>

to fix this simply change the layout to this

<div>
   <div class="basic">
       <div /> <-- google ads
       <div /> <-- footer
   </div>
</div>

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>