Creating a horizontal fluid layout in css that works like a table
- by ivordesign
Basically what i am after is a fluid solution in css, that is similar to the table layout below.The principal behind this layout is 3x3 grid where by a user can add content into the first fluid area and it will expand the complete width of the page. But if that user decides that he wants content in the 2nd and 3rd area, all 3 td's fill up 33% of the width.
Effectively what i am asking is how do i create a css based layout that can do the same as the table layout?
<table width="100%">
<tr>
<td id="leftZone" >
fluid area here
</td>
<td >
fluid area here
</td>
<td id="rightZone">
fluid area here
</td>
</tr>
</table>
<table width="100%">
<tr>
<td valign="top" >
fluid area here
</td>
<td >
fluid area here
</td>
<td >
fluid area here
</td>
</tr>
</table>
<table width="100%">
<tr>
<td >
fluid area here
</td>
<td >
fluid area here
</td>
<td >
fluid area here
</td>
</tr>
</table>
