Pure CSS Table Free Layouts and Grids TemplateA simple pure CSS table free layouts for two or three column website. This was made before Bootstrap and grid systems were invented.
This post was originally written pre-Bootstrap (i.e. a very long time ago). Bootstrap grids use the same techniques but are much more flexible and use classes instead of hard-coded styles. Other frameworks also exist which do the same thing, such as the 960 grid system.
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 is as simple as copy & paste.
These templates can be used for either displaying content in a table-based layout, or you can use them based on a table-less CSS web design - three columns or two columns with sidebars!
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. You can use percentages or fixed width (px/em) for the widths, just make sure they add up to slightly less than the page width otherwise the right-hand column will drop below in IE.
This method for CSS table-free layouts was devised way before Bootstrap columns, but I'm leaving it here in case it is useful to someone who doesn't want to use large frameworks.
<h2>Two Columns</h2>
<div style="float: left; width: 50%;">
<div style="padding: 5px; border:1px solid #aaa">
Left Column Content
</div>
</div>
<div style="float: left; width: 49%">
<div style="padding: 5px; border:1px solid #aaa">
Right Column Content
</div>
</div>
<div style="clear:both"><span></span></div>
<h2>Three Columns</h2>
<div>
<div style="float:left; width:32%; border:1px solid #aaa">
Left Column Content
</div>
<div style="float:left; width:32%; margin:0 1%; border:1px solid #aaa">
Center Column Content
</div>
<div style="float:left; width:33%; border:1px solid #aaa">
Right Column Content
</div>
</div>
<div style="clear:both"><span></span></div> For ease 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.
