35: Floats and clearing

Forums » Dev.Opera » Archived Article Discussions

This topic has been closed. No new entries allowed.

Reason: You can now post comments on articles on Dev Opera

Forum rules and guidelines

You need to be logged in to post in the forums. If you do not have an account, please sign up first.

26. September 2008, 06:37:26

35: Floats and clearing

Floats were originally created to allow you to float text beside images, and clearing serves as a way to get subsequent paragraphs to stop floating, if desired. However, these properties have been hijacked somewhat, and are now often used to create multiple column layouts. All of this is discussed in this article.

( Read the article )

Tommy Olsson

26. September 2008, 11:43:23

Oropher8598

Posts: 1


Containing floats
As you’ve seen above, the parent box doesn’t normally expand to contain floated children.
[...]
Replace the last rule with this, then save and refresh:

#p1 {
	overflow: hidden;
}
Note that [this] method doesn’t work in Internet Explorer 6 or older.


Actually this can be made to work in IE5 & IE6 too: all you have to do is declare a width.
#p1 {
	overflow: hidden;
	width: 100%;
}
I've used 100% as an example, but you can change that to suit your layout.

There's a more detailed explanation on Quirksmode.

29. September 2008, 05:50:26

Opera Software

chrismills

Posts: 378

Originally posted by Oropher8598:

Actually this can be made to work in IE5 & IE6 too: all you have to do is declare a width.



Thanks a lot for the tip!
Chris Mills
Developer Relations Manager
Editor, dev.opera.com and labs.opera.com

29. September 2008, 06:14:18

Yes, it looks like another hasLayout issue. If the container has layout, then overflow:hidden works even in IE6. Setting a width isn't always possible, but any trick that makes the container have layout, such as zoom:1, will fix the bug.
Tommy Olsson

3. February 2009, 16:07:34

AndBre

Posts: 25

1. "float:inheritis"
2. "clear:bothit"
3. "as sene in Figure 5"
4. "clear:bothon"

Forums » Dev.Opera » Archived Article Discussions