container div height in Firefox

htcilt

07-08-2010, 03:15 PM

Hi,

I have a div (container) that contains 6 divs (subcontainer) arranged in 3 rows of 2 columns using left float.

For some reason in Firefox, the height of the container does not adjust to fit its contents. This problem does not occur in IE.

Here is a simple bit of code to illustrate the problem.

<html>
<head>
<style>
#container{
width:410px;
border:3px solid #dd0000;
padding:5px;
}

.subcontainer{
width:200px;
height:100px;
border:1px solid #000;
float:left
}
</style>
</head>
<body>
<div id="container">
<div class="subcontainer">Text 1</div>
<div class="subcontainer">Text 2</div>
<div class="subcontainer">Text 3</div>
<div class="subcontainer">Text 4</div>
<div class="subcontainer">Text 5</div>
<div class="subcontainer">Text 6</div>
</div>
</body>
</html>

htcilt

07-08-2010, 03:39 PM

Figured it out. Adding overflow:hidden; to the container cures the problem. I tried overflow:visible; as this seems more logical than hidden... but when has web design been logical?!

DMNecris

07-09-2010, 10:50 AM

Figured it out. Adding overflow:hidden; to the container cures the problem. I tried overflow:visible; as this seems more logical than hidden... but when has web design been logical?!

I just registered intending to post a thread for the exact same problem, when I saw yours. This solved my problem too, so thanks for the inadvertent help. :-)