an***@webkr.de wrote:
Hello,
the page
http://www.moon2.de/float.htm
is displayed in IE as I would expect (the second block right beside the
first).
But in FF only the header ("Blabla") of the second block is floating
beside the first one, the rest is beneath it.
Why?
Reason:
The div's width containing the 2nd image is defined as 150px and is
calculated from the extreme left edge.
100px is already used up by the 1st image, leaving only 50px.
The text "Blahbla" fits in the remaing 50px.
The 2nd image being 100px wide does not fit in the remaining 50px.
So it's moved down to where it will fit. Fx and Opera get it right. IE
gets it wrong.
Apply a border to your divs to see what is going on.
Solution:
Apply margin-left:100px; to the 2nd wrapper div and all browsers will
render alike.
Davy gives another solution by floating both wrappers.
The second float's left edge is calculated from the first float's right
edge.
If, on the other hand, you wish to have both wrapper divs rendered above
each other by all browsers,
then apply a clear:left; to the second wrapper div.
--
Gus