relative positioning

Hello,

I want to make this layout:

http://i51.tinypic.com/974cjs.jpg

There are 4 relative positioned divs next to each other in some container.

The red line in my picture shows where the container's height should end but it doesn't because of the last div which default position is down there. I can't set fixed height for container because of random stuff above.

How to do it?

Share mockup of layout you want and your present code in which you have issue...

I don't think it's important, but if you need it anyway ...

CSS

#container
{
width:600px;
background:blue;
margin:0 auto;
}

.box
{
float:left;
width:196px;
height:318px;
background:red;
}

#box1
{
position:relative;
left:-140px;
float:left;
}

#box2
{
position:relative;
left:-102px;
}

#box3
{
position:relative;
left:-66px;
}

#box4 //this div is doing the mess because it's default position is under the other 3 divs and that's why the container stretches.
{
position:relative;
left:558px;
top:-318px;
}



HTML

<div id="container">

<div>RANDOM CONTENT</div>

<div class="box" id="box1"></div>
<div class="box" id="box2"></div>
<div class="box" id="box3"></div>
<div class="box" id="box4"></div>

<div style="clear:both"></div>
</div>