Help with DIV/FLOAT in Firefox

[vanhammersley]

Hello,

I'm tearing my hair out with an issue using DIV floats, and the differences I'm getting between IE and FF.

Quite simply...I'm trying to float 2 divs within a main/container div, and have them float properly next to each other.

The code below is a stripped down version of what I'm creating, that I did just to break things down to test/figure out what the problem is...

As I have it coded below, it looks fine in IE...but in FF, the 2nd div (i.e. DIV2 - with all the Lorem Ipsum content) gets knocked below vs. floating to the left of the div where an image will go (i.e. DIV1)...

I had hoped I could have DIV1 be fixed, and DIV2 to be flexible/size according to the width of the CONTAINER DIV...I have the width:auto in there thinking that would do the trick, but it's not. It works fine actually in FF when I make it fixed, but it needs to be flexible/fluid...

As I have it now, it's not working in FF like I want it too....

I'm a bit of a newbie here, so any advice or direction would be greatly appreciated, and save me from losing all of my hair :)

<div id="CONTAINER" style="width:600px;">

<div id="DIV1" style="float:left; width:275px; background:#eee">My image would go here</div>

<div id="DIV2" style="float:left; width:auto; background:#ccc">Content would go here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin a turpis id leo porttitor ullamcorper. Praesent facilisis. Aenean tempus rhoncus est. Sed ut risus et metus condimentum hendrerit. Maecenas vestibulum. Donec tempor lacinia diam. Suspendisse potenti. Sed metus massa, pretium vel, ullamcorper et, interdum a, ante. Sed a augue.</div>

<div style="clear:both"></div>

</div>

[almostbob]

]float:none or just leave out 'float' for the text divs, they will flow around the image.
IE does not behave as standards dictate, but standard compliant code renders properly in IE (this time)
The easiest way is

<div id=container>
<img style='float:left width:128px height:128px;' src='whatever/it/is.jpg'> <div id="DIV2" style="background:#ccc">Content would go here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin a turpis id leo porttitor ullamcorper. Praesent facilisis. Aenean tempus rhoncus est. Sed ut risus et metus condimentum hendrerit. Maecenas vestibulum. Donec tempor lacinia diam. Suspendisse potenti. Sed metus massa, pretium vel, ullamcorper et, interdum a, ante. Sed a augue.</div></div>

[MidiMagic]

I thought it was "ipsum before doler, except after lorem."

The real problem is nesting of features.

The standard calls for the following nesting order, outside to inside:
- margin
- border
- padding
- width

IE orders them in the wrong order:
- width
- margin
- border
- padding