title: position absolute.. anyway to stop this elements moving?
body: <p>Is there any solution available to stop elements that don't have a predefined height from moving up when an position absolute is used in another div?</p>
  
  <p>this is what it looks like with the heights defined.</p>
  
  <p><a href="http://jsfiddle.net/77tsq/" rel="nofollow noreferrer">http://jsfiddle.net/77tsq/</a> : DEMO</p>
  
  <pre><code>.relative {
    position: relative;
    width: 600px;
    height: 400px;
    background:green;
  }
  
  .absolute {
    position: absolute;
    top: 120px;
    right: 0;
    width: 400px;
    height: 200px;
    background:blue;
  
  }   
  
  .test { position:relative;
    width: 600px;
  height:200px;
  float:left;
   clear:both;
   background:pink;
  }
  
  .clear { clear:both;}
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="relative"&gt;
  &lt;div class="absolute"&gt;
  
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="clear"&gt;&lt;/div&gt;
  
  &lt;div class="test"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>But when remove the heights it looks like this:</p>
  
  <p><a href="http://jsfiddle.net/77tsq/1/" rel="nofollow noreferrer">http://jsfiddle.net/77tsq/1/</a> - No heights</p>