title: I want to arrange tables horizontally and vertically , contained in two DIVs arranged horizontally
body: <p>I am trying to arrange 8 tables in two rows.I have two divs alligned horizontally<br> I am trying to align <br>
  4 tables in rows 1<br>
  4 tables in row 2<br></p>
  
  <p>When I try to put this below  code inside another [left] DIV container. All the tables go in one line. Below is the code that I am using.</p>
  
  <pre><code>&lt;div class="datagrid"&gt;&lt;table&gt;
      &lt;thead&gt;&lt;tr&gt;&lt;th&gt;header&lt;/th&gt;&lt;th&gt;header&lt;/th&gt;&lt;/tr&gt;&lt;/thead&gt;
      &lt;tbody&gt;&lt;tr&gt;&lt;td&gt;data&lt;/td&gt;&lt;td&gt;data&lt;/td&gt;&lt;/tr&gt;
      &lt;tr class="alt"&gt;&lt;td&gt;data&lt;/td&gt;&lt;td&gt;data&lt;/td&gt;&lt;/tr&gt;
      &lt;tr&gt;&lt;td&gt;data&lt;/td&gt;&lt;td&gt;data&lt;/td&gt;&lt;/tr&gt;
      &lt;tr class="alt"&gt;&lt;td&gt;data&lt;/td&gt;&lt;td&gt;data&lt;/td&gt;&lt;/tr&gt;
      &lt;tr&gt;&lt;td&gt;data&lt;/td&gt;&lt;td&gt;data&lt;/td&gt;&lt;/tr&gt;
      &lt;/tbody&gt;
      &lt;/table&gt;&lt;/div&gt;
  </code></pre>
  
  <p>Kindly guide me on this issue. If required I can upload complete code that I am using.</p>