PDA

Click to See Complete Forum and Search --> : "Float: left" disables outer div auto-height

xkrja
06-24-2009, 03:55 AM
Check at the code below. The outer div has a red background but this is not shown because I use "float: left" on the inner divs. So if "float: left" is used it manage to disable the auto-height in the outer div. If the "float: left" property is removed from both inner divs the auto-height on the outer div works and the background is red.

Why is that? It's really annoying since I have to set a fix height manually on the outer div to get the background color to the height I want.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<div style="background: Red;">
<div style="height: 100px; background: Green; float: left;">fsdfsdf</div>
<div style="float: left">fsdfdsfsdf</div>
</div>

</body>
</html>

Thanks for help!
Coyotelab
06-24-2009, 06:07 AM
<div style="background: Red; position: relative;">
<div style="height: 100px; background: Green; left:0; width: whatever; position: absolute;">fsdfsdf</div>
<div style="left: +whatever; position: absolute;">fsdfdsfsdf</div>
</div>
xkrja
06-24-2009, 09:01 AM
Thanks, that worked. Approx at least :-)

By coincidence I swapped place between the absolute and relative positions and that solved the problem.
aj_nsc
06-24-2009, 10:29 AM
The above CSS isn't needed, just apply:


overflow: hidden; /* for standards compliant browsers */
width: 100%; /* for IE */


to the outer container and it will automatically clear the float.
xkrja
06-24-2009, 12:47 PM
Thanks, that worked fine!