This topic has been closed. No new entries allowed.
Reason: You can now post comments on articles on Dev Opera
You need to be logged in to post in the forums. If you do not have an account, please sign up first.
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
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.
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
Developer Relations Manager
Editor, dev.opera.com and labs.opera.com
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