Question

I am looking for some way to display this type of grid in html and css.

I want to stretch out the smaller column to match the taller one. Is this possible? I have tried a solution with some javascript, but am not really happy with the solution. There are some complexities in that the column with the most rows may not be the tallest. Also the boxes may be different heights if they have different amounts of content.

I am open minded about the markup to be used here, currently I am using two lists side by side, but a table or anything else is fine. However, just using rowspan doesn’t seem like it will work as this will just give one box that is much bigger than the others. This seems like it may be a common problem is there a good solution out there?

Answer 1

may be this can work

<table border="1" >
<tr>
<td>
<table border="0">
<tr><td>data</td></tr>
<tr><td>data</td></tr>
<tr><td>data</td></tr>
<tr><td>data</td></tr>
<tr><td>data</td></tr>
</table>
</td>
<td>
<table border="0" cellpadding="5">
<tr><td>data</td></tr>
<tr><td>data</td></tr>
<tr><td>data</td></tr>
<tr><td>data</td></tr>
</table>
</td>
</tr>
</table>