You might get the idea that you’d like to have your content spread over several columns. A simple way is to set up your columns in the HTML of your post edit screen. (there is other code if you want to hard code it into your site…this isn’t it)
Note that you will NOT be using tables, the old and now almost defunct way. (Seriously, tables are going the way of the dinosaur, or so I hear. )
Well, they’ll still be used with content filled with heavy data, like the chemical table. But for us regular folk, try this simple method. To get the example below, place the following on your html edit page.
<div id="columns"> <div id="col_one" class="first"> This is stuff in my first column. Blah, blah, blah. </div> <div id="col_two" class="second"> This is stuff in my second column. Blah, blah, blah. </div> <div id="col_three" class="third"> This is stuff in my third column. Blah, blah, blah. </div></div>
And then in your custom css file, place the following:
div#columns {background: #FFF838; margin-left: 35px; }
#col_one {position:relative; float:left; padding:1em; width:170px;}
#col_two {position:relative; float:left; padding:1em; width:170px;}
#col_three{position:relative; float:left; padding:1em; width:170px;}
And you’ll get what I have above. (Or something better if you tweak the css.) You can use the div id column to specify the size of the box that holds your columns, or the background color, which is especially helpful if you want the area surrounding your columns to be uniform. You can adjust the margin, widths, padding, and float to suit your layout. Later, I’ll show how to use a function and a hook (for Thesis users) to place these columns in certain areas of your layout.
Compliments of GH at DiyThemes forum.