[RESOLVED] Float acts differently in IE and Fx

[LindaTheresa]

Hi!

I would be happy if someone could help me figure out the following:

I have container divs with a width and a margin-bottom.

Inside the container divs I have three divs with width and float:left.

What I want is the result that I get in Internet Explorer, but in Firefox (plus Opera and Safari) it looks completely different. The only way I've figured out to fix it in Firefox is to set a height to the container div, but I don't want to do that as I want the content in the three divs inside the container to decide the height.

The (simiplified) code looks like this:

The css:

.container
{width:300px; margin-bottom:20px}

.left
{width:100px; float:left; background-color:#cccccc}

.middle
{width:100px; float:left; background-color:#999999}

.right
{width:100px; float:left; background-color:#666666}


The html:

<div class="container">
<div class="left">aaa<br>aaa</div>
<div class="middle">bbb</div>
<div class="right">ccc</div>
</div>

<div class="container">
<div class="left">ddd</div>
<div class="middle">eee</div>
<div class="right">fff</div>
</div>


I've attached images where you can see the outcome in the two browsers
Grateful for help!

/Theresa

[bathurst_guy]

<div class="container">
<div class="left">ddd</div>
<div class="middle">eee</div>
<div class="right">fff</div>
<div style="clear: both;">&nbsp;</div>
</div>

[LindaTheresa]

Thanks a lot!
Works perfectly!
/Theresa