Sent by Bruno Fassino on 18 September 2004 16:04
Daniel Jewett wrote:
>> <div id="wrap">
>> <div id="header"></div>
>> <div id="nav"></div>
>> <div id="sheet"></div>
>> <div id="footer"></div>
>> </div>
[...]
> Now I want to give "header" a margin-top equal to the height
> of "nav," say 50px. Working with Safari and Gecko browsers,
> everything including "nav" moves down 50px.
[...]
My understanding is the following:
When you use a margin-top on #header, this escapes out of the top the #wrap
container. It is a case of correct margin collapsing. So it is the whole
wrapper that moves down (better, it gets a top margin) and #nav moves with
it. IMO this is correct behaviour. (IE/Win doesn't collapse these margins,
as frequently happens, and it is wrong.)
A simple 1px border-top on #wrap stops the collapsing, and renders the
margin effective in pushing #header down below #nav.
When using padding-top on #wrap, #header moves obviously down, and #nav
remains correctly anchored to the 'padding edge' of #wrap: this edge is the
'external' perimeter of the padding area, see the diagram at
<http://www.w3.org/TR/CSS21/box.html#box-dimensions>. All browsers seem
correct in this case.
Bruno
______________________________________________________________________
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/
