Problem with nested DIVs and container height

The 4 DIVs inside the container DIV screw up the height.

[wilkeson]

I have 4 identical DIVs contained within a container DIV (I would have used tables, but I want the layout to be slightly staggered). The DIVs are positioned in relation to the first child DIV (#large) using top/left attributes.

The problem in IE6 and 7 is that the overall height of the container DIV is always the sum of the 4 child DIVs, no matter how I position them (it does however render correctly in Firefox).

The simplified code is:

<style type="text/css">

#container {
width: 316px;
text-align: left;
height: 360px;
}

#large {
width: 150px;
height: 150px;

}
#medium {
width: 150px;
height: 150px;
position: relative;
top: -130px;
left: 160px;
}

#small {
width: 150px;
height: 150px;
position: relative;
top: -130px;
left: 0px;
}

#cart {
width: 150px;
height: 150px;
position: relative;
top: -260px;
left: 160px;
}
</style>

<br>
<div align="center">
<div id="container">
<div id="large">test</div>
<div id="medium">test</div>
<div id="small">test</div>
<div id="cart">test</div>
</div>
</div>

I'm guessing that this is a rather simple problem, but for the life of me I couldn't find any information about it online.

[thesheep]

I think you're a bit mixed up here.

To position DIV B relative to DIV A you must make A {position: relative} and then B {position: absolute;}

Also, the <div align="center"> is redundant. You just need to set horizontal margins to 'auto' on the container div.

[wilkeson]

>I think you're a bit mixed up here.

>To position DIV B relative to DIV A you
>must make A {position: relative} and
>then B {position: absolute;}

>Also, the <div align="center"> is redundant.
>You just need to set horizontal margins to
>'auto' on the container div.

I'm sorry, I'm not really sure which DIVs you are referring to with A and B (I'm assuming you mean #large and #medium).

I'm not quite sure how making A relative and B absolute will make B relative to A. Making any of the child DIVs absolute won't render uniformly across different resolutions.

I tried adding margin-left: auto; and margin-right: auto; to #container, but that didn't center it on the page.

Thanks for your help though.

EDIT:
Ah, I see what you mean, the container should be relative, and all but the first child DIVs should be absolute. Thanks again.