CODEWITHSUNDEEP
javascripthtmlcss
user
user

Reputation: 6807

Relative Positioning Div

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?

Upvotes: 0

Views: 226

Answers (2)

OneNerd
OneNerd

Reputation: 6552

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.

Upvotes: 0

andres descalzo
andres descalzo

Reputation: 14967

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

Upvotes: 2

Related Questions