Hey guys, I'm having some trouble getting my div's to be the same height in firefox. Take a look here: http://www.mobilealmanac.com/test.html So you'll notice I have a div that has a dark gray bg, a div with a white bg over that (which makes the dark gray div appear like a border) and then a small gray div which will eventually be he left hand navigation. As you can probably tell, I want the large white and dark gray divs to stretch to be the same height as the small gray div. (see it in IE6, it looks right in that browser) I can't specify the height as the height will be determined by the length of the content, which is going to vary on every page. Can anyone help me? I've been messing with this for forever and I can't seem to get it! Here's the code if that helps: <html> <header> <style> body { background-color: #aeaeae; } </style> </header> <body> <div align="center" id="maincontainer" style="width: 100%; float:left;"> <div id="maincontainerborder" style="width: 1000px; background-color: #9d9c9c; display: block;"> <div id="containeramargin" style="width: 996px; background-color: #FFF; text-align: left; display: block;"> <div class="spacer" style="width: 144px; height: 5px; font-size: 1px; display: block;"> </div> <div id="leftcolumn" style="width: 144px; position: relative; left: 10px; float: left; display: block;"> <div class="leftnavborder" style="width: 144px; background-color: #cecece; float: left; display: block;"> asdf<br><br> </div> </div> </div> </div> </div> </body> </html Code (markup):
That is due to your leftcolumn floating and never cleared, so the div containeramargin will not gain the right height. Add a clearing div (div which has the style clear:both after the div leftcolumn and it should do the job.