Apr 23
Fun with floats
2004 at 07.27 am posted by Veerle Pieters
A friend and reader of my blog, Travis Crips, helped me out on a webpage design in CSS. I got stuck on some errors and didn’t know how to fix them. Travis found the error and pointed me at some interesting floating issues that I would like to share with you…
It seems that if you use 2 floating div boxes contained in 1 div which holds the background of both boxes, that you get a collapsing effect of this containing div. The solution to this problem is to add a "clearing" div below the 2 floated boxes. The clearing div is set so it can't have content on either side of it (clear: both;), forcing it to appear in its own vertical block below the content before it, even if that content has been floated. Since the clearing div is not floated, the container div must recalculate its height so it will be tall enough to "contain" the bottom of the clearing div.
9served
1
When you float something you take it out of the normal flow of the document, thus it takes up no vertical height.
Clearing an element increases that elements top margin to the height of the largest preceding (floated) element.
2
When I got stuck with the same problem some time ago, this Eric Meyer’s article put the matter into perspective for me and solved my probems.
3
nice 1 thnx!
4
Andy said it better. Thanks for your clarification about the clear rule.
5
Wow!
I ran into a lot of positioning problems, before, especially with floats and nesting them.
Seems like this could be an alternative solution for these projects:
Strange Dawn; and
J. Apo Construction Supply
Nice tip! Many thanks to you guys~
6
I’m loving you right now! I’m still a bit new to css layouts ( or tableless design ). I’m nearing the end of a project and thought I was basically screwed. NICE!
7
Another weird thing about float, if you float your containing div, you don’t need the clearing div. This trick help me a coupe of time when I didn’t want to use an extra div.
I’m not sure it works in every browser but I think it does.
8
From the article I’ve linked in my previous comment:
“The potential drawback to using floats to contain floats is that you rely on browsers to consistently interpret the layout of multiple nested floated elements. The situation becomes more fragile if these floats are part of a more complicated layout, one possibly using floats, positioning, or tables. This is not to say such layouts are impossible to achieve. They may, however, involve a good deal of trial and error to avoid obscure floating and other layout bugs that may lurk inside rendering engines.”
9
i have a problem i wont right floated elements height to be equel with left one.left one have a lot of text but right one have a litle.
how can i do this.
i