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.
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 copying & paste.
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.
These templates can be used to display content in a table-based layout or use them based on a table-less CSS web design - three columns or two columns with sidebars!
The column widths do not add up to 100% because of a CSS bug in the way IE renders DIV cells. You can use percentages or fixed width (px/em) for the widths; 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 if 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.
