Float in IE/FF

Thread view:

Enable EMail Alerts

Start New Thread

Thread rating:

andre@webkr.de - 29 May 2006 08:26 GMT

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é

Reply to this Message

davyzhang@gmail.com - 29 May 2006 10:13 GMT

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>

Reply to this Message

André Hänsel - 29 May 2006 13:01 GMT

davyzhang@gmail.com schrieb:

> here you go
> you forget one "float:left"
[quoted text clipped - 7 lines]
> </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"?

Reply to this Message

Gus Richter - 29 May 2006 15:14 GMT

> Hello,
>
[quoted text clipped - 6 lines]
>
> 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.

Signature

Gus

Reply to this Message

davyzhang@gmail.com - 30 May 2006 05:57 GMT

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

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~

Reply to this Message

Gus Richter - 31 May 2006 03:13 GMT

> 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

Signature

Gus

Reply to this Message

Webmaster Forum / HTML, CSS, Scripts / CSS / May 2006

Float in IE/FF