[EMAIL PROTECTED] wrote:
> http://www.artsci.wustl.edu/~jkatz/nishmah.d/test.html

> Why does floating a div lead to the collapsing of the margin below? 
> (I see it in firefox, but don't know if it would appear in other 
> browsers.)

All win/Mac browsers on my test-panel reacts that way - apart from
IE/win. Guess that says Firefox is correct.

The "why" is answered here:
<http://www.w3.org/TR/CSS21/box.html#collapsing-margins>
...although it is not easy to figure out that bit.

The solution is a lot easier:
We don't make use of 'margin-top' on containers following floats - set
it to zero.
Instead we define 'clear: left/right/both' on the container below
floats, and define a 'margin-bottom: (value here)' on the float itself.

Avoid using 'position: absolute' to solve cases like this - at all cost.
'position: absolute' will take elements out of the flow so they can't
interact and adjust. Floats can always interact, and can be moved in and
out of the flow at will.

See an extreme example...
<http://www.gunlaug.no/contents/wd_demo_float_03.html>
...where margins are used to manipulate floats.

W3C has this test-page:
<http://www.w3.org/Style/CSS/Test/float-margin>

regards
        Georg
-- 
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/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Reply via email to