Float in IE/FF

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?

Regards,
André

here you go
you forget one "float:left"
<DIV>
<DIV style="FLOAT: left">Lala
<DIV><IMG src="reloaded.files/kritzel.gif"></DIV>Lorem Ipsum </DIV>

<DIV style="float:left">Blabla
<DIV style="WIDTH: 150px"><IMG
src="reloaded.files/kritzel.gif"></DIV>Loremipsum
</DIV>
</DIV>

davyzhang (AT) gmail (DOT) com schrieb:

here you go
you forget one "float:left"
DIV
DIV style="FLOAT: left">Lala
DIV><IMG src="reloaded.files/kritzel.gif"></DIV>Lorem Ipsum </DIV

DIV style="float:left">Blabla
DIV style="WIDTH: 150px"><IMG
src="reloaded.files/kritzel.gif"></DIV>Loremipsum
/DIV
/DIV

I don't understand why.
Doesn't "float: left" mean that all following block elements go right
beside the element that has "float: left" set until there is one with
"clear"?

andre (AT) webkr (DOT) 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

thanx Gus ,i only know the solution and you tell me why

here comes another question:
if I defined an element's width just like in this case,the element's
position attribute changes to "absolute"?

I tried switch the position in the 2nd img div like this: <div
style="width: 150px;position:relative;"><img src="kritzel.gif"></div>
and also "static" "absoulte"

but it seems no effect as long as I defined width. If I remove the
width attribute,relative position and static has no difference

I'm pretty confused by float and position ,if it too long to explain
,any existing article can help me? thanx a lot~

davyzhang (AT) gmail (DOT) com wrote:

I'm pretty confused by float and position ,if it too long to explain
,any existing article can help me? thanx a lot~

There are probably many sites which you can find. Here is one that I
have found just now:

http://www.html.net/tutorials/css/introduction.asp

--
Gus