Given the following I would expect a 200px red box at the top of the page followed by a white space of 100 pixels then a purple box on the bottom. This is what the WYSIWYG view in Dreamwever shows me but what I get in FF IE Chr is a red box in the middle of the page. Funny thing is if I add a border to the wrapper div I get what I expect.
So what is happening is that the margin-top:300px of the #content div is pushing down the #header div. Since the #header div is positioned absolutely inside of the #wrapper div i dont get 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>