Geek asks and answers

CSS Absolute positioning of one div affected by margin in an unrelated div

Given the following, I would expect a 200px red box to appear at the top of the page, followed by a blank space of 100 pixels, and then a purple box at the bottom. This is what the WYSIWYG view in Dreamwever shows me, but what I get in FF IE Chr is the red box in the middle of the page. It's funny if I add a border to the div wrapper, I get what I expect.

So what happens is that margin-top: 300px from the #content div clicks on the #header div. Since div #header is absolutely inside div #wrapper, I don’t understand why this is happening.

<style>
#wrapper{
    width:960px;
    margin:0 auto;
    background-color:#fff;
    position:relative;
    border:0px solid green;
    }
#header{
    width:960px;
    height:200px;
    background-color:#f00;
    position:absolute;
    top:0px;
    left:0px
    }
#content{
    width:960px;
    background-color:#f2f;
    margin-top:300px;
    }
</style>


<div id="wrapper">
    <div id="header">header</div>
    <div id="content">content<br  /><br  /><br  /></div>
</div>
+3
source share
1 answer

, . , , - 300px #wrapper (, , #header ) - Box W3C .

" " : #wrapper 0px #content 300px top-margin #wrapper (#content - , #header ).

, #header, - :

#content{
  width:960px;
  background-color:#f2f;
  padding-top:300px;
}

. http://www.w3.org/TR/CSS2/box.html#collapsing-margins

+6
source

More articles:


All Articles