why are <div>s overlapping?

Question

check out the code in jsfiddle: http://jsfiddle.net/UrBFR/

HTML:

<div id="main">
        <div id="header">
        </div>
        <div id="menupane">
            <a href="#" class="buttons">Test</a>
            <a href="#" class="buttons">Test</a>
            <a href="#" class="buttons">Test</a>
            <a href="#" class="buttons">Test</a>
            <a href="#" class="buttons">Test</a>
            <a href="#" class="buttons">Test</a>
            <a href="#" class="buttons">Test</a>
            <a href="#" class="buttons">Test</a>
        </div>
        <div id="body">
        </div>
        <div id="footer">
        Hello
        </div>
    </div>

CSS:

#main
{
    width: 60em;
    height: 36em;
    margin: auto;
}

#header
{
    background-color: #00c0ff;
    height: 5em;
}

#menupane
{
    background-color: green;
    width: 10em;
    height: 28em;
    float: left;
}

.buttons
{
    color: #1f3568;
    text-decoration: none;
    font-family: courier new;
    color: #000000;
    margin-right: 0px;
    line-height: 40px;
    text-align: center;
    display: block;
}

.buttons:hover
{
    background-color: #ff9600;
}

#body
{
    background-color: yellow;
    float: right;
    height: 28em;
    width: 50em;
}

#footer
{
    background-color: red;
    height: 35em;
}

note that height for footer is 35em. i want the height to be 3em, but if i do that, then it does not show up. basically, what is happening is that the footer div is below all the other divs and only when i give a height that is bigger than all the other divs combined do i get to see the footer. this has never happened before. can anyone tell me why this is happening and how to fix this?

Answer 1

I forked your jsfiddle to provide the answer:

http://jsfiddle.net/nickadeemus2002/SCuvR/

css:

#main
{
    width: 60em;
    height: 36em;
    margin: auto;
}

#header
{
    background-color: #00c0ff;
    height: 5em;
}

#menupane
{
    background-color: green;
    width: 10em;
    height: 28em;
    float: left;
}

.buttons
{
    color: #1f3568;
    text-decoration: none;
    font-family: courier new;
    color: #000000;
    margin-right: 0px;
    line-height: 40px;
    text-align: center;
    display: block;
}

.buttons:hover
{
    background-color: #ff9600;
}

#body
{
    background-color: yellow;
    float: right;
    height: 28em;
    width: 50em;
}

#footer
{
    **clear:both;**
    background-color: red;
    height: 3em;
}

Notice the #footer CSS rules. I added "clear:both" because you implemented a "float" in "#menupane". You need to clear the float behavior so additional elements can appear as expected.

You can find our more about "clear" here:

http://www.w3schools.com/cssref/pr_class_clear.asp

Clear "both" means no floating elements can appear on the left or right side.