5h4rk @ gmail wrote: > Hi all, in order for a parent element to wrap a floating child > element correctly, I used to use either "overflow:hidden" or > "float:left" or "float:right" for the parent element, both work fine > for me, but I'd like to know the difference between them and when to > use what.
Any 'property: value' that establishes a new "block formatting context"[1] will make an element "expand in height to contain floating children" - if left with an unrestricted height (default = auto). In addition to that: all 'property: value' combinations do of course also have their own, distinct, effects on the elements they are declared on, which makes them different and more or less suited to achieve "expand to contain floats" depending on the case at hand. For some examples on suitable - and some not so suitable - ways to "contain floats" - depending on case, see links under *containing floats* on this page... <http://www.gunlaug.no/contents/wd_example_01.html> It should be clear that all methods have strong and weak sides, apart from varying support across browser-land. ----- For details: See "floating a box"[2] for how a float behaves and its intended use. See "Overflow: the 'overflow' property"[3] for that property and its alternative values and intended use. They are indeed very different, even though they may sometimes be used to achieve the same effect when it comes to "containing floats". regards Georg [1]http://www.w3.org/TR/CSS21/visuren.html#block-formatting [2]http://www.w3.org/TR/CSS21/visuren.html#comp-float [3]http://www.w3.org/TR/REC-CSS2/visufx.html#overflow -- http://www.gunlaug.no ______________________________________________________________________ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
