Forum Moderators: not2easy
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<style type="text/css">
body, html {
padding:0; margin:0; color:white;
}
#top {
height:100px;
background:green;
}
#container {
background:red;
height:600px;
}
#rightblock {
width:150px;
float:right;
background:purple;
}
#content {
margin: 30px 150px 0 15px;
}
</style>
</head>
<body>
<div id="top">Top</div>
<div id="container">
<div id="rightblock">RightBlock</div>
<div id="content">Content</div>
</div>
</body>
</html>
Since I have the 30px margin pushing down the content div, it is also pushing down the float and the background... which doesn't seem right to me. The odd thing, is if you add any border to the container div, it fixes where it goes.
I am curious as to why this is pushing all of this down, it doesn't seem like it should.
I am curious as to why this is pushing all of this down, it doesn't seem like it should
It is 8.3.1 Collapsing margins [w3.org].
If the element's margins are collapsed with its parent's top margin, the top border edge of the box is defined to be the same as the parent's.
The margin on your content div is collapsing with the (parent) container div. The content and container div now have the same top border edge, so the margin renders outside that. i.e. outside the container div.
Your solution of putting a (top) border on the container works and so would putting on 1px top padding as it's putting a barrier between the content divs margin and the container divs margin this stops them from being adjacent and therefore stops them collapsing.
further forum reading.. collapsing margins [google.com]
Suzy
