bobo 5

When the following html is viewed in IE8, you will see it works correctly, but in Firefox, the container div does not expand vertically. Why and how it can be fixed? You can paste the following html in different browsers and have a look using this editor: http://htmledit.squarefree.com/

<div style="border:1px solid yellow;width:500px;">

<div style="border:1px solid red;width:100px;float:left;">aaaaaaa</div>

<div style="border:1px solid blue;width:100px;float:right">bbbbbbb</div>

</div>

3 answers

1
point
This was chosen as the best answer

to add to Nathan's reply, fix it by floating the container or using overflow:hidden.

e.g.

<div style="border:1px solid yellow;width:500px; overflow:hidden;">

<div style="border:1px solid red;width:100px;float:left;">aaaaaaa</div>

<div style="border:1px solid blue;width:100px;float:right">bbbbbbb</div>

or

<div style="border:1px solid yellow;width:500px; float: left;">

<div style="border:1px solid red;width:100px;float:left;">aaaaaaa</div>

<div style="border:1px solid blue;width:100px;float:right">bbbbbbb</div>

</div>

which forces the container to 'shrink wrap' the children

Answered almost 9 years ago by Tony Crockford
2
points

"If an element contains only floated or absolutely positioned elements, it will have no content at all, and its height will be zero."

Answered almost 9 years ago by Nathan Duran
Andrea 5
1
point

The container DIV needs to clear the floats in order for it to expand with its content. Like Nathan said, if the DIV only contains floated elements, it won't have a height.

One out-dated method is to add a "clear DIV" beneath the floated elements inside the container DIV, and sets its CSS to: { clear: both; width: 100%;} However, it's cleaner and more semantic to not add any extraneous code to clear floats.

Adding a width and an explicit overflow statement (either auto or hidden, depending on your situation) to your container DIV, like Tony recommended, is becoming the preferred method. It adds no extra HTML code to bloat the page, and works across almost every browser.

Answered over 8 years ago by Andrea