title: Layout a table by DIV elements
body: <p>I'm interested how could I create a table like layout working only with div elements. I read a lot about <code>display</code> and <code>float</code> style attributes and I think this code should layout content as I want, but I see a table with the second row moved to one position below.</p>
  
  <p>I expect to see:</p>
  
  <pre><code>left1 right1
  left2 right2
  </code></pre>
  
  <p>but I see</p>
  
  <pre><code>left1 
  left2 right1
        right2
  </code></pre>
  
  <p>Here my CSS</p>
  
  <pre><code>.big {
      display: inline-block;
  }
  
  .small {
      display: block;
  }
  
  .left {
      display: inline;
  }
  
  .right {
      display: inline;
      float: right;
  }
  </code></pre>
  
  <p>And here my html file: </p>
  
  <pre><code>&lt;div class="big"&gt;
  &lt;div class="small"&gt;
      &lt;div class="left"&gt;left1&lt;/div&gt;
      &lt;div class="right"&gt;right1&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="small"&gt;
      &lt;div class="left"&gt;left2&lt;/div&gt;
      &lt;div class="right"&gt;right2&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>I managed to create the table (add rule <code>width: 100px</code> to the <code>.small</code> selector) but I don't want to specify width of my DIV elements, because they could have different width.</p>
  
  <p>Thanks</p>