Tables are pretty effective as a page layout tool but they may be undesirable under certain circumstances. In my case, blog entries that used table based layouts (e.g. a two column article with a pic on the left and text on the right) would misrender in the blog entries listing page as part of their html tags would be cut off by the blog's backend. I needed something that would render correctly even if the closing tags were missing. Enter CSS based layout.

There are various techniques to do CSS page layout but the one I've found works the best is the "float" style based one. Here is code that makes for a nice two column layout.

<style>
	#colLeft {
		float:left;
		width:320px;
                padding:10px;
                margin:5px;
                border:solid green 1px;
        }

	#colRight {
                padding:10px;
                margin:5px;
                border:solid green 1px;
        }

        #colContainer {
                height:540px;
                padding:10px;
                margin:5px;
                border:solid red 1px;
        }
</style>

<div id="colContainer">

<span id="colLeft">
     <img align="bottom" src="/files/gal_oly-hoops.jpg">
</span>
<span id="colRight">
     some text here
</span>

</div>

It is pretty simple really: two spans within a container div with the span on the left having a style of "float:left". Also note that the left span's width style as well as the container's height are set to specfic numeric px values. This is done here in order to tailor the layout around the image's specific size; however, for two text only columns we could have used a percentages as needed. The rest of the used styles are not crucial and may be changed to whatever you prefer.

Here is what the code renders to when placed inside a blue-border parent div: