[RESOLVED] Float acts differently in IE and Fx

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:

[CODE]
.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}
[/CODE]

The html:

[CODE]
<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>
[/CODE]

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

/Theresa

[upl-file uuid=b182d042-b251-4e36-9c22-0e36fe13f545 size=979B]ie.gif[/upl-file]

[upl-file uuid=bff98c36-ec0f-43e0-8fbb-36ffd39d4b27 size=1kB]fx.gif[/upl-file]

Also in #CSS _↴