Div doesn't adjust its size?

div doesn´t want to adjust its size

[Juane]

Hi there,

This code produces different results in IE and netscape. I would like the outer div to conserve the border like IE does without seting the height attribute.

Thanks a lot

<div style="position:relative; top:10px; left:10px; width:100px; border:1px solid black">
<div style="float:left; width:90px; height:90px; background-color:blue;"></div>
<div style="float:left; width:90px; height:90px; background-color:red;"></div>
</div>

[Birdman]

I would take the floats out of the two inner divs. They are going to stack on top of one another either way, so you don't need them and that is most likely why you're having trouble.

Another way to fix it would be to add an element(div) after the second floated div and set it's style to: 'clear: both;'.

Floated elements are taken out of the document flow, therefore not accounted for when the container element height is calculated. In other words, if you only have floating elements inside a container, the browser will treat the container like it is empty(hence the missing background colors and borders).

[Juane]

Thanks Birdman

I solved the problem setting the style attribute display:table of the outer div

Now netscape draws the border of the outer div

[Birdman]

You're welcome. You should consider my suggestion because adding display: table; [w3.org] doesn't make much sense to me(it's not a table). If it works for you and you are fine with it then roll on, but I know you could do it with half the CSS you have posted.

Birdman