CODEWITHSUNDEEP
css
David542
David542

Reputation: 110592

Basic CSS floating columns 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.

Upvotes: 0

Views: 113

Answers (3)

Prateek Choudhary
Prateek Choudhary

Reputation: 409

Remember to clear your floats after <div id='main'></div> something like 

<div id='container'>
    <div id='sidebar' style="float:left">
    </div>
    <div id='main' style= "float:left">
    </div>
    <div style="clear:both"></div>
</div>

Assuming footer is outside 'container'

<div id="footer"></div>

Upvotes: 3

clairesuzy
clairesuzy

Reputation: 27674

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;}

Upvotes: 3

David542
David542

Reputation: 110592

footer {
    clear: both;
}

That does the trick.

Upvotes: 2

Related Questions