Relative Positioning Div

Question

I've created a div and add 2 divs to it:

<div id="content">
<div id="a"></div>
<div id="b"></div>
</div>

and the styles:

#content {
    width:100px;
    height:100px;
    background-color:blue;
}
#a, #b {
    position:relative;
    top:0px;
    left:0px;
    width:100px;
    height:100px;
    background-color:red;
}
#b {
    top:-100px;
    background-color:green;
}

In Firefox I got one 100x100 green "box", but in IE, the "content" div is higher than 100px (it is 200px high), and you can see the blue "box" under the green.

Is it possible to force the "content" div to be 100px high?

Answer 1

#content {
    width:100px;
    height:100px;
    background-color:blue;
    overflow:hidden;
}

Answer 2

Try overflow:hidden or overflow:auto on the #content div to see if that gives you the desired result. You may also want to issue a padding:0px; and margin:0px; on your divs.