Sent by Michael Landis on 17 February 2005 02:02
Ellen wrote:
> Put two divs directly in the body (margin and padding = 0 on the
> body). A couple of paragraphs in each just to fill them up. Div1 has
> no top margin. Div2 has a top margin. Float div1 left. The top of
> floated div1 acts as if it had a top margin and thus is aligned to
> the top of static div2. It doesn't touch the top of the body. This is
> not what I expected.
>
> Put the two divs in a container div with no margins or padding. Now
> the tops of div1 and div2 are not aligned, div1 has no top margin and
> touches the top of the body. This is the behavior I would expect.
What you are seeing actually doesn't have to do with whether the content
divs are contained in another div -- it has to do with whether that
container div has a border around it or not. (If you remove the border, you
see the same issue as if the container hadn't existed.)
The difference has to do with collapsing margins. This gets pretty complex
-- I gave a long-winded explanation a while back[1], to which Bob Easton
also recommended an article from Eric Meyer.[2] Hopefully reading these
will help make sense to the next paragraphs.
Basically, the border forces the top-margin'ed div to keep that margin
within the box. Without that, the margin is imposed on the next container's
margin (in this case, <body>), pushing everything within that container
down.
If you are trying to ensure that the floated element stays flush to the top
of the page, you may want to consider adding the 2em as padding to the
nonfloated element (perhaps using a wrapper so that you don't have to worry
about 2em of extra colored area) or, if you don't want a wrapper, adding a
2em top border to the non-floated div might work, too. (If you don't need
the float to be flush against the top, adding 1px of padding or a 1px top
border to body might to the trick.)
HTH,
Michael
[1] http://archivist.incutio.com/viewlist/css-discuss/51839
[2] http://www.complexspiral.com/publications/uncollapsing-margins/
______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
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/
