Question

I have a sidebar that is floated left, and then a main content area that is also floated left.
My footer is not staying below the main content, and oftentimes jumps up to over-lap it, depending on the size of the browser page. The content of the page is dynamic, so I can’t set a minimum-height to solve the problem (although it does work if I apply it to a static page with a known height).

I have a layout somewhat like this

<div id='container'>
    <div id='sidebar')
    </div>
    <div id='main'>
    </div>
</div>

style: float sidebar, main content to the left.

Clearing right does not affect the problem. How can I solve this problem? Thank you.

Answer 1

If the footer is inside the container, give it a 100% width and have it clear:both (giving it a width is optional but can help older IE’s)

If the footer is outside the container set the container itself to overflow: hidden or somehow make it into a new block formatting context so it contains the two floats and then the footer should naturally sit below it

The code below should cover both scenarios..

#container {zoom: 1; overflow: hidden; background:#eee;}
#sidebar {float:left; width: 200px; border: 1px solid #f00;}
#main {float: right; width: 600px; border: 1px solid #000;}
#footer {clear: both; background: #0f0;}