title: Aligning tables side by side on multiple rows
body: <p>I am trying to align 10 tables side by side i.e in 5 rows and 2 columns.
  The rows in each table is different from the other. I have used float: left and defined a width for each div, but it is still not working. </p>
  
  <p>Here is some sample code and the <a href="http://jsfiddle.net/GfJTd/10/" rel="nofollow">fiddle</a></p>
  
  <pre><code>&lt;div style="width:500px;"&gt;
  
      &lt;div style="float:left; width:250px"&gt;       
          &lt;h4&gt;Details &lt;/h4&gt;           
          &lt;table border="1px"&gt;    
          &lt;tbody &gt;        
                  &lt;tr&gt;
                      &lt;td&gt;Id&lt;/td&gt;
                      &lt;td&gt;1234-4524-4591-2545&lt;/td&gt;
                  &lt;/tr&gt;        
                  &lt;tr&gt;        
                      &lt;td&gt;Name&lt;/td&gt;
                      &lt;td&gt;Test&lt;/td&gt;
                  &lt;/tr&gt;     
                  &lt;tr&gt;
                      &lt;td&gt;Status&lt;/td&gt;
                      &lt;td&gt;OK&lt;/td&gt;
                  &lt;/tr&gt;        
                  &lt;tr&gt;        
                      &lt;td&gt;Step&lt;/td&gt;
                      &lt;td&gt;6&lt;/td&gt;
                  &lt;/tr&gt;      
                  &lt;tr&gt;
                      &lt;td&gt;Date&lt;/td&gt;
                      &lt;td&gt;xxx&lt;/td&gt;
                  &lt;/tr&gt;        
                  &lt;tr&gt;        
                      &lt;td&gt;Time&lt;/td&gt;
                      &lt;td&gt;ysa&lt;/td&gt;
                  &lt;/tr&gt;                                 
          &lt;/tbody&gt;
          &lt;/table&gt;
      &lt;/div&gt;
  
  &lt;div style="float:left; width:250px"&gt;
  &lt;div&gt;
      &lt;h4&gt;Options&lt;/h4&gt;    
  &lt;/div&gt;
  &lt;table border="1px"&gt;    
      &lt;tbody&gt;        
              &lt;tr&gt;
                  &lt;td&gt;Option 1&lt;/td&gt;
                  &lt;td&gt;OK&lt;/td&gt;
              &lt;/tr&gt;        
              &lt;tr&gt;        
                  &lt;td&gt;Option 2&lt;/td&gt;
                  &lt;td&gt;OK&lt;/td&gt;
              &lt;/tr&gt;         
              &lt;tr&gt;
                  &lt;td&gt;Option 3&lt;/td&gt;
                  &lt;td&gt;OK&lt;/td&gt;
              &lt;/tr&gt;        
              &lt;tr&gt;
                  &lt;td&gt;Option 4&lt;/td&gt;
                  &lt;td&gt;OK&lt;/td&gt;
              &lt;/tr&gt;                         
      &lt;/tbody&gt;
  &lt;/table&gt;
  &lt;/div&gt;
  
  &lt;div style="float:left; width:250px"&gt;
  &lt;div&gt;
      &lt;h4&gt;Schedule&lt;/h4&gt;    
  &lt;/div&gt;
  &lt;table border="1px"&gt;    
      &lt;tbody &gt;        
              &lt;tr&gt;
                  &lt;td&gt;Time&lt;/td&gt;
                  &lt;td&gt;11/12/12 6:30 AM&lt;/td&gt;
              &lt;/tr&gt;        
              &lt;tr&gt;        
                  &lt;td&gt;Email ID:&lt;/td&gt;
                  &lt;td&gt;gf@abc.com&lt;/td&gt;
              &lt;/tr&gt;                       
      &lt;/tbody&gt;
  &lt;/table&gt;
  &lt;/div&gt;
  
  &lt;div style="float:left; width:250px"&gt;
  &lt;div&gt;
      &lt;h4&gt;Body&lt;/h4&gt;   
  &lt;/div&gt;
  &lt;table border="1px"&gt;    
      &lt;tbody&gt;
  
              &lt;tr&gt;
                  &lt;td&gt;Subject Line&lt;/td&gt;
                  &lt;td&gt;test&lt;/td&gt;
              &lt;/tr&gt;        
              &lt;tr&gt;        
                  &lt;td&gt;From Address&lt;/td&gt;
                  &lt;td&gt;user@gmail.com&lt;/td&gt;
              &lt;/tr&gt;        
               &lt;tr&gt;        
                  &lt;td&gt;From Name&lt;/td&gt;
                  &lt;td&gt;Some Name&lt;/td&gt;
              &lt;/tr&gt;                                      
      &lt;/tbody&gt;
  &lt;/table&gt;
  &lt;/div&gt;
  
  &lt;div style="float:left; width:250px"&gt;
  &lt;div&gt;
      &lt;h4&gt;User Settings&lt;/h4&gt;    
  &lt;/div&gt;
  &lt;table border="1px"&gt;    
      &lt;tbody&gt;    
              &lt;tr&gt;
                  &lt;td&gt;Setting 1&lt;/td&gt;
                  &lt;td&gt;false&lt;/td&gt;
              &lt;/tr&gt;        
              &lt;tr&gt;        
                  &lt;td&gt;Setting 2&lt;/td&gt;
                  &lt;td&gt;&lt;/td&gt;
              &lt;/tr&gt;                                              
      &lt;/tbody&gt;
  &lt;/table&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  ​
  </code></pre>