Simple Three Column Layout

I will be showing you how to make a very simple but effective three column layout.

First we will begin with the HTML, or structure, of our three column layout.

Depending upon what you're using each column for there are two ways to position our divisions. We will start with the easier one first.

For this exmaple we are actually going to change our HTML a little. Instead of using ids for our divisions we are going to give them all the same class. So our HTML should look like this.

The reason we're giving each division the same class is so it will be easier to give them all the same style from one rule.

Now we will begin with the CSS, or styles, for our three column layout.

The most important style here is the "float:left;". This is what makes each division sit perfectly against one another. It's really all you need to make a three column layout. The other styles are simply for visual aid. It's very simply but it does cost some customability of each division. This is where our second example comes into play.

Now we switch back to our first code.

Each division having its own id makes it much easier to add specific styles to that, and only that, division. We're still going to use the same styles for each division and we do have to type a little more code, but it's worth it for customability of each division.

Now you know two ways to make a three column layout, simply by using the powerful style "float:left;".

Attached Files

	Example 1.zip (621 Bytes, 136 views)
	Example 2.zip (644 Bytes, 121 views)

re: Simple Three Column Layout

hello -
with a record set query from php in mysql database how would that layout? wouldnt you need some sort of method or for loop then pass it and increment the variable passed?

if so could you show me an example?

thanks in advance for your help!