title: Form element container heights
body: <p>I'm building a form manager for my framework and want to add methods to create form elements based on parameters passed. Each "element container" has the following:</p>
  
  <ul>
  <li>A validation row positioned at the top of the container. This row is turned off by default (display: none) and will only show if a javascript validation error occured.</li>
  <li>A label container (situated on the left)</li>
  <li>A form control container (situated on the right)</li>
  </ul>
  
  <p>Here is a sample HTML:</p>
  
  <pre><code> &lt;div class='control_container'&gt;
        &lt;div class='validation'&gt;&lt;/div&gt;
        &lt;div class='label_container'&gt;
             &lt;label for=''&gt;Label&lt;/label&gt;
        &lt;/div&gt;
        &lt;div class='elements_container'&gt;
             &lt;div class='element'&gt;
                  &lt;input type='text' name='' value='' /&gt;
             &lt;/div&gt;
        &lt;/div&gt;
   &lt;/div&gt;
  </code></pre>
  
  <p>My issue here is that I need to the control_container to seperate label and elements containers but also need the label_container and element_container to both have the same height irrespective of the content. These 2 containers may have different background colours so I need to ensure that the stretch to the bottom of the control_container and also keep in consideration that the validation div might show (so using position: absolute and top: 0 might not work).</p>
  
  <p>I have tried the following:</p>
  
  <ul>
  <li>Giving control_container a relative position and the 2 seperate containers both a position absolute. As the height of the containers would mostly be dictated by the height of the label (if the label is multiple lines or if the element_container has multiple elements within it this option does not work.</li>
  <li>Floats (There I say more? :D)</li>
  </ul>
  
  <p>I would prefer a CSS solution which is compatible with most browsers (including IE8 (am I pushing it to ask for IE7 haha)</p>
  
  <p>Any ideas?</p>
  
  <p>** ADDITIONAL INFORMATION **</p>
  
  <p>I want the layout to look something like this:</p>
  
  <pre><code> --------------------- control_container ---------------------
   [Potential validation message (this will be toggled on/off) ]
   [label_container][ elements_container                       ]
   ------------------- end of control_container ----------------
  </code></pre>
  
  <p>So label_container (with the label) and elements_container (with it's elements) will be next to eachother. These 2 containers may have different background colours so they should both stretch (height) according to the biggest element. The only issue I see here is validation element which wont show by default so using absolute positioning might not work as the validation message might take the top area and have the elements overlap eachother.</p>