In a pure CSS based layout, it is often necessary to create a section that resembles a table, i.e. an image on the left and text on the right.
Without using tables this can be a little tricky, however with these templates, it simple.
You will probably notice that the column widths do not add up to 100%, this is because of a CSS bug in the way IE renders DIV cells.
<-- TWO COLUMN -->
<div style="float: left; width: 50%;">
<div style="padding: 5px;">
<!-- LEFT CONTENT -->
</div>
</div>
<div style="float: left; width: 49%">
<div style="padding: 5px;">
<!-- RIGHT CONTENT -->
</div>
</div>
<div style="clear:both"><span></span></div>
<-- THREE COLUMN -->
<div>
<div style="float:left; width:32%">
<!-- LEFT CONTENT -->
</div>
<div style="float:left; width:32%; margin:0 1%">
<!-- CENTER CONTENT -->
</div>
<div style="float:left; width:32%">
<!-- RIGHT CONTENT -->
</div>
</div>
<div style="clear:both"><span></span></div>
For easy of integration I have used inline styles here, you may wish to convert the inline style to a class or id. You can also change the percentages around to create uneven width columns.
