title: place a div under another div of unknown height
body: <p>I have a centered div whose height depends on the user screen resolution ( div1 ). I would like to automatically position a second div ( div2 ) exactly under it ( again in the center ), preferably without the use of either calculations/javascript or the use of a wrapping table</p>
  
  <pre><code>&lt;div id="div1" class="div1"&gt;&lt;/div&gt;
  &lt;div id="div2" class="div2"&gt;&lt;input type=image src=bla.jpg&gt;&lt;/div&gt;
  </code></pre>
  
  <p>css:</p>
  
  <pre><code>.div1 {
      position: absolute;
      overflow: hidden;
      top: 10px;
      left: 0px;
      right: 0px;
      width: 50%;
      height: 65%;
      min-width: 100px;
      min-height: 200px;
      max-width: 200px;
      max-height: 300px;
      background-color: red;
      border: 1px solid #000000;
      margin: 0 auto;
  }
  
  .div2 {
      position: relative;
      display: table;
      overflow: hidden;
      top: 200px;
      border: 1px solid #000000;
      padding: 0px;
      margin: 0 auto;
      background-color: yellow;
      visibility: visible;
  }
  </code></pre>
  
  <p>not working jsfiddle : <a href="http://jsfiddle.net/Y4kga/" rel="nofollow">http://jsfiddle.net/Y4kga/</a>
  the yellow div should be exactly ( touching ) under the red div</p>
  
  <p>p.s. i'm using display: table because i have insite input type=image and i want the width the be as big as the input type.</p>
  
  <p>How should i do this ?
  thanks in advance!</p>