Web Development

Ask something
Discussion Locked

Differences in CSS floats in IE and Netscape

0 helpful
3 replies

by maryweilage

Closed to new repliesThis discussion is closed. It stays readable, but it takes no new replies.

This week's Design and Usability Tactics e-newsletter explains how you can deal with differences in CSS floats in IE and Netscape. If you encounter browser rendering differences when working with CSS floats, how do you resolve such issues? Do you think you'll use the workaround that's presented in this column? Let us know about some of your experiences with CSS floats.

If you aren't subscribed to the Design and Usability Tactics e-newsletter, visit our e-newsletter subcenter to subscribe to this free e-
newsletter:
http://nl.com.com/MiniFormHandler?brand=builder&subs_channel=bldr_front_door&list_id=e614&;;tag=fb

* Please delete any extra spaces that appear when you paste this link into your browser.

3 replies

by alsopls

I noticed that when I resize the window in IE 6 SP1, that

wraps under the

space.
What is the work around for that.

by bmacdonald

Port side text...
Eu fugiat nulla pariatur. Velit esse cillum dolore duis aute irure dolor ut aliquip ex ea commodo consequat.

Second column text...
Velit esse cillum dolore duis aute consectetur adipisicing elit. Quis nostrud sed tempor est laborum.

Sed do eiusmod tempor incididunt sunt in culpa consectetur adipisicing elit. Excepteur sint occaecat eu fugiat nulla pariatur. Eu fugiat nulla pariatur. Ut labore et dolore magna aliqua.

by pixelsurge

Michael Meadhra implies the IE has the correct implementation of floats, but this is not the case. If you read the float specification at w3.org, you will see that all floats are supposed to have a width specified. This is why he gets unpredictable results with Example C, in which the second column is floated but not assigned a width. Since it does not have a width assigned, it defaults to "auto," meaning, "be as large as you need to be to contain the content." Since the float contains free-flowing text, it fills up 100% of the space available. Thus, the float takes up 100% of the viewport and drops down. I believe Mozilla's implementation is more correct in this case -- but both IE and Mozilla have to make judgement calls on how to render it because all floats really ought to have widths defined.

This discussion is closed to new replies.