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.
Here is some sample code and the fiddle
<div style="width:500px;">
<div style="float:left; width:250px">
<h4>Details </h4>
<table border="1px">
<tbody >
<tr>
<td>Id</td>
<td>1234-4524-4591-2545</td>
</tr>
<tr>
<td>Name</td>
<td>Test</td>
</tr>
<tr>
<td>Status</td>
<td>OK</td>
</tr>
<tr>
<td>Step</td>
<td>6</td>
</tr>
<tr>
<td>Date</td>
<td>xxx</td>
</tr>
<tr>
<td>Time</td>
<td>ysa</td>
</tr>
</tbody>
</table>
</div>
<div style="float:left; width:250px">
<div>
<h4>Options</h4>
</div>
<table border="1px">
<tbody>
<tr>
<td>Option 1</td>
<td>OK</td>
</tr>
<tr>
<td>Option 2</td>
<td>OK</td>
</tr>
<tr>
<td>Option 3</td>
<td>OK</td>
</tr>
<tr>
<td>Option 4</td>
<td>OK</td>
</tr>
</tbody>
</table>
</div>
<div style="float:left; width:250px">
<div>
<h4>Schedule</h4>
</div>
<table border="1px">
<tbody >
<tr>
<td>Time</td>
<td>11/12/12 6:30 AM</td>
</tr>
<tr>
<td>Email ID:</td>
<td>gf@abc.com</td>
</tr>
</tbody>
</table>
</div>
<div style="float:left; width:250px">
<div>
<h4>Body</h4>
</div>
<table border="1px">
<tbody>
<tr>
<td>Subject Line</td>
<td>test</td>
</tr>
<tr>
<td>From Address</td>
<td>user@gmail.com</td>
</tr>
<tr>
<td>From Name</td>
<td>Some Name</td>
</tr>
</tbody>
</table>
</div>
<div style="float:left; width:250px">
<div>
<h4>User Settings</h4>
</div>
<table border="1px">
<tbody>
<tr>
<td>Setting 1</td>
<td>false</td>
</tr>
<tr>
<td>Setting 2</td>
<td></td>
</tr>
</tbody>
</table>
</div>
</div>
Here’s the tables laid out correctly:
http://jsfiddle.net/GfJTd/23/
If you want them to be equal height you could: