title: css nested divs vertical alignment
body: <p>I'm trying to figure out the most generic way how to vertically space the "button"-ID in the example below. Sadly, this must also be displayed correctly in ie7.</p>
  
  <pre><code>    &lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
      "http://www.w3.org/TR/html4/loose.dtd"&gt;
      &lt;html&gt;
      &lt;head&gt;
      &lt;meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15"&gt;
      &lt;title&gt;Box Model&lt;/title&gt;
      &lt;style type="text/css"&gt;
      body * {margin:0;padding:0;}
  
      .main {width:600px;height:200px;border:solid red 2px;}
  
      .myLblAndVal { float:left;width:350px; }
  
      #myLabels {
      float:left;
      width: 150px;
      text-align:right;
      }
  
      #myValues {
      float:right;
      width: 150px;
      display:inline;
      }
  
      #myButton {
      float:right;
      width: 200px;
      margin-top:10px; /* Do I have to use an absolute value? */
      }
      &lt;/style&gt;
      &lt;/head&gt;
  
      &lt;body&gt;
      &lt;h1&gt;Vertical Spacing&lt;/h1&gt;
  
      &lt;div class="main"&gt;
      &lt;div class="myLblAndVal"&gt;
      &lt;div id="myLabels"&gt;
        &lt;p&gt;111 Labels... Haec disserens qua de re agatur
        et in quo causa consistat non videt...&lt;/p&gt;
      &lt;/div&gt;
      &lt;div id="myValues"&gt;
        &lt;p&gt;222 Values... causas naturales et antecedentes, 
        idciro etiam nostrarum voluntatum...&lt;/p&gt;
      &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div id="myButton"&gt;
        &lt;p&gt;333 Button... nam nihil esset in nostra 
        potestate si res ita se haberet...&lt;/p&gt;
      &lt;/div&gt;
      &lt;/div&gt;
      &lt;/body&gt; &lt;/html&gt;
  </code></pre>
  
  <p>Do I have to use an absolute value?</p>
  
  <p>Thanks for any pointers, </p>
  
  <p>draptik</p>