The top margin of a nested div (#main) is pulling down its containing div (#middle) along with the 2 floated divs flanking it. This problem corrects itself and gives me the desired effect if I add a border to #middle. However I'd like to understand the problem and do away with the border. Here is a test page I made to illustrate my problem
[CODE=html]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<style>
#wrap {width: 900px;}
#head {
background: green;
height: 60px;}
#middle {background: blue;
height: 800px;
}
#left {
float: left;
width: 100px;
background: purple;
height: 600px;
}
#right {
float: right;
width: 100px;
background: red;
height: 600px;
}
#main {
margin: 60px 110px 0 110px;
background: orange;
height: 700px;
}
#foot {background: green;
height: 60px;
}
</style>
</head>
<body>
<div id="wrap">
<div id="head"></div>
<div id="middle">
<div id="left"></div>
<div id="right"></div>
<div id="main"></div>
</div>
<div id="foot"></div>
</div>
</body>
</html>[/CODE]
[CODE=html]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<style>
#wrap {width: 900px;}
#head {
background: green;
height: 60px;}
#middle {background: blue;
height: 800px;
}
#left {
float: left;
width: 100px;
background: purple;
height: 600px;
}
#right {
float: right;
width: 100px;
background: red;
height: 600px;
}
#main {
margin: 60px 110px 0 110px;
background: orange;
height: 700px;
}
#foot {background: green;
height: 60px;
}
</style>
</head>
<body>
<div id="wrap">
<div id="head"></div>
<div id="middle">
<div id="left"></div>
<div id="right"></div>
<div id="main"></div>
</div>
<div id="foot"></div>
</div>
</body>
</html>[/CODE]
Comment