title: Problems with relative positioning with css
body: <p>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.</p>
  
  <p>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.</p>
  
  <p>I would be greatful for any hint or advise.</p>
  
  <p>parascus</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;style type="text/css"&gt;
  #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;
  }
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div id='outer'&gt;
  &lt;div id='left'&gt;DIV Left&lt;/div&gt;
  &lt;div id='right'&gt;DIV Right&lt;/div&gt;
  &lt;div id='middle'&gt;
  DIV Middle&lt;br&gt;
  with an&lt;br&gt;
  unknown height&lt;br&gt;
  which has effect on the outer height.
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>It should look like this:<img src="https://i.stack.imgur.com/Frd35.jpg" alt="good example"></p>
  
  <p>But I get this:
  <img src="https://i.stack.imgur.com/qaGo4.jpg" alt="bad example"></p>
  
  <p>Or this:
  <img src="https://i.stack.imgur.com/9vIAw.jpg" alt="worse result"></p>
  
  <p><strong>The solution (triggered by fenix) was:</strong></p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;style type="text/css"&gt;
  #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;
  }
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div id='outer'&gt;
  &lt;div id='x'&gt;
  &lt;div id='left'&gt;DIV Left&lt;/div&gt;
  &lt;div id='middle'&gt;
  DIV Middle&lt;br&gt;
  with an&lt;br&gt;
  unknown height&lt;br&gt;
  which has effect on the outer height.
  &lt;/div&gt;
  &lt;div id='right'&gt;DIV Right&lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>This ends in:
  <img src="https://i.stack.imgur.com/fXpaQ.jpg" alt="enter image description here"></p>