title: Mimicking a HBox / VBox with CSS
body: <p>I'm an old school tables guy, and am pretty baffled when it comes to modern HTML.  I'm trying to something as simple as vertical / horizontal layouts (i.e. Flex's hbox/vbox), but am having major difficulty replicating them.</p>
  
  <p>An old table would look something like this for an HBox:</p>
  
  <pre><code>&lt;table width="100%" height="100"&gt;
      &lt;tr valign="middle"&gt;
          &lt;td nowrap style="background-color:#CCC"&gt;I am text on grey&lt;/td&gt;
          &lt;td width="50%" valign="top"&gt;displays top&lt;/td&gt;
          &lt;td width="50%" align="right"&gt;Autosize Fill (displays bottom right)&lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>Now I'm trying to do this with div's, but to no avail.  When using display:inline, I cannot set a percentage width -- it only takes explicit widths.  When using float:left, settings 100% percentage width causes it to really be 100% and pushes the next div down.</p>
  
  <p>Here's the code I've been playing with:</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;/head&gt;
  &lt;style type="text/css"&gt;
  div.test { background-color: #EE9; padding:5px;}
  body { font-family: Arial; }
  
  ul {
      list-style-type:none;
  }
  
  ul li {
      float:left;
  }
  
  .hboxinline div {
      display: inline;
  }
  
  .hboxfloat div {
      float:left;
  }
  
  .cellA {
      background-color:#CCC;
      width:100%;
  }
  .cellB {
      background-color:#DDD;
      min-width:100;
  }
  .cellC {
      background-color:#EEE;
      min-width:200;
  }
  
  &lt;/style&gt;
  
  &lt;body&gt;
  A = 100%, b = 100, c = 200
  
  &lt;div class="test"&gt;old school table
  &lt;table cellpadding="0" cellspacing="0"&gt;
      &lt;tr&gt;
          &lt;td class="cellA"&gt;A&lt;/td&gt;
          &lt;td class="cellB"&gt;B&lt;/td&gt;
          &lt;td class="cellC"&gt;C&lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;&lt;/div&gt;
  
  &lt;br/&gt;
  
  &lt;div class="test"&gt;
      float:left
      &lt;div class="hboxinline"&gt;
          &lt;div class="cellA"&gt;A&lt;/div&gt;
          &lt;div class="cellB"&gt;B&lt;/div&gt;
          &lt;div class="cellC"&gt;C&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;br/&gt;
  
  &lt;div class="test"&gt;ul / li
      &lt;ul class="ulli"&gt;
          &lt;li class="cellA"&gt;A&lt;/li&gt;
          &lt;li class="cellB"&gt;B&lt;/li&gt;
          &lt;li class="cellC"&gt;C&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  
  &lt;br/&gt;
  
  &lt;div class="test"&gt;
      display:inline
      &lt;div class="hboxfloat"&gt;
          &lt;div class="cellA"&gt;A&lt;/div&gt;
          &lt;div class="cellB"&gt;B&lt;/div&gt;
          &lt;div class="cellC"&gt;C&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  
  &lt;/body&gt; 
  &lt;/html&gt;
  </code></pre>