Q:

Problems with relative positioning with css

I'm trying to build a page with a big div in the middle which "lays" on to other divs on the left and on the right with the code at the end of the question.  the three divs should be contained in a further div (called outer) and it's height should be (almost) exactly the height of the div in the middle.  Because the height of the div in the middle is not fix this is true forthe outer div as well. 
Trying to use relative positioning sets my middle-div below the ones on the left and the right.  Setting th etop of the middle div leaves a blank area between the middle div and the lower border of the outer div.  Using absolute positioning results in a collapsed outer div. 
I would be greatful for any hint or advise. 
parascus
<html>
<head>
<style type="text/css">
#outer {
   width:300px;
   border:1px solid #000000;
}

#left {
   position:relative;
   display:inline-block;
   float:left;
   margin:3px;
   width:50px;
   border:1px solid #C08080;
}

#right {
   position:relative;
   display:inline-block;
   float:left;
   left:185px;
   margin:3px;
   width:50px;
   border:1px solid #C08080;
   text-align:right;
}

#middle {
    background-color: #FBE6AD;
    display: inline-block;
    overflow: hidden;
    position: relative;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
    left: 50px;
    top: -48;
    width: 200px;
}
</style>
</head>
<body>
<div id='outer'>
<div id='left'>DIV Left</div>
<div id='right'>DIV Right</div>
<div id='middle'>
DIV Middle<br>
with an<br>
unknown height<br>
which has effect on the outer height. 
</div>
</div>
</body>
</html>

It should look like this:
But I get this:

Or this:

The solution (triggered by fenix) was:
<html>
<head>
<style type="text/css">
#outer {
    border:1px solid #000000;
    display:inline-block;
    width:300px;
}

#x {
    display:table-row;
}

#left {
    background-color: #c0c0c0;
    position:relative;
    display:inline-block;
    float:left;
    margin:3px -5px 0px 3px;
    width:50px;
    border:1px solid #C08080;
    padding:0px;
}

#right {
    background-color: #c0c0c0;
    position:relative;
    display:inline-block;
    float:left;
    margin:3px 3px 0px -5px;
    width:50px;
    border:1px solid #C08080;
    text-align:right;
}

#middle {
    background-color: rgba(250, 220, 200, 0.8);
    display: inline-block;
    float:left;
    overflow: hidden;
    position: relative;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
    width: 200px;
    margin:3px 0px 6px 0px;
    z-index:10;
}
</style>
</head>
<body>
<div id='outer'>
<div id='x'>
<div id='left'>DIV Left</div>
<div id='middle'>
DIV Middle<br>
with an<br>
unknown height<br>
which has effect on the outer height. 
</div>
<div id='right'>DIV Right</div>
</div>
</div>
</body>
</html>

This ends in:

A:

Have you considered a table with three cells in one row?   Not entirely sure what the content will be, but that might be an alternate route? 
Would this be on only one page?  Or across multiple pages?  If across multiple pages then you could utilize a Master page with the relevant styling reflecting ContentPlaceHolders?