Html – Div inside others (with margin-top) is pushing parents down

csshtml

When I was working on a little project I ran into a delema I can't for the life of me figure out. Why is it that the div inside #appHead is causing #windowBody to move down? Any Ideas?

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Atlas - Valencia College</title>
        <meta charset="utf-8">
        <link rel="stylesheet" href="styles.css" type="text/css">
        <!--<script type="text/javascript" src="scripts.js"></script-->
    </head>
    <body>
        <div id="bgGrad"></div>
        <div id="windowTop">
        </div>
        <div id="windowBody">
            <div id="appEnv">
                <div id="appHead">
                    <div style="margin-top:20px;height:20px;"></div>
                </div>
            </div>
        </div>
        <div id="windowFoot">
        </div>
    </body>
</html>

css

body{
background:url("lol.png");
margin:0;
}
#appEnv{
width:100%;
height:100%;
top:0;
bottom:0;
left:0;
right:0;
outline:dotted 1px blue;
}
#appHead{
height:100px;
}
#windowBody{
position:absolute;
top:0;
width:100%;
bottom:0;
}

Even when I removed all of the absolute positioning, it was still the case, however I may have done it wrong.

Best Answer

Ok, I played with this a bit and here's what I've found:

First, #windowBody is not being moved down. If you slap a border on it you'll see that it doesn't move regardless of other changes. It's actually #appHead that moves.

In your code, you have no content in the appHead div, but have instead thrown another div into it that includes a margin-top. Because there's no content in #appHead it basically gets merged into it's child div and gains it's margin-top attribute, moving it down by 20px (you can change the 20px to another number to see the change). Adding even a single word to #appHead (but not inside it's child div) will totally solve the problem.

You can play around with it here: http://jsfiddle.net/tsuujin/QcpgC/

Related Topic