Hi,
I have a layout with three variable height columns. The background to the whole page (i.e. the div containing the columns) needs to finish beneath the columns. Obviously, because all three are floated, the background is not showing at all. It's a fixed with centered layout.
The code is like this:
Code:<html> <head> <style type="text/css"> #container { width: 800px; margin: 0 auto } #main { background: #f00; } #col_1{ width: 200px; } #col_2 { width: 400px; } #col_3 { width: 200px; } </style> </head> <body> <div id="container"> <div id="main"> <div id="col_1"> Column 1 </div> <div id="col_2"> Column 2 </div> <div id="col_3"> Column 3 </div> </div> </div> </body> </html>
How can I get the background to always show at the correct height? I've tried adding a <div style="clear: both"></div> after col_3, which works in IE7 but not in Firefox.
Don't want to rearrange the order of the columns in the HTML if possible, nor use Javascript.
Thanks for any pointers...
Bookmarks