title: CSS alternative to overflow:hidden
body: <p>I have an issue with my CSS layout</p>
  
  <p>I have a form that is contained in a 500 pixel fixed width. It is set to be centered in the page with margin auto;</p>
  
  <p>Inside that div I made a table using div's. Since each div's that act as a table row have different height, I have used the overflow:hidden property. I did that to minimize the size of the form.</p>
  
  <p>Inside that div I have 3 other divs that act like table data "td". They are floating inside the row.</p>
  
  <p>What I am trying to achieve is to display another div on top of them all when there is an error in the form. Just like the one you see on Stackoverflow reminding you that you have code in your text that need to be set as code. The red div on the right. Now I am a bit stuck because I can't overflow that div to the sides.</p>
  
  <p>So what other option do i have to set the height of the "row" div without using overflow:hidden. I dont want to use tables and the content is always changing.</p>
  
  <p>Any solution is welcome.</p>
  
  <p>Here is simple code so you get the picture;</p>
  
  <pre><code> &lt;div class="row"&gt;
  &lt;div class="overflowing"&gt;&lt;/div&gt;
       &lt;div class="float_left"&gt;&lt;/div&gt;&lt;div class="float_left"&gt;&lt;/div&gt;      &lt;div class="float_right"&gt;&lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>The overflowing div should not push the floating divs around and is not visible until I change it's property and fill it with content.</p>