http://northbeachnet.comA Wordpress, PHP/MySQL Web Developer's Blog

A Three Column Liquid Layout

Friday, September 25th, 2009 by MikeLT

As I said in my previous post, I have pretty much always used the liquid layout. In the past when starting from scratch I would do a search to review the concept, which I always seemed to almost but not quite grasp. Not this time! To me, it is perfectly clear, and I marvel at the simplicity of it! It’s nothing but percentages, margins, and floats.

For this website, I wanted to use the two narrow columns as sidebars together on the same side of the page, with the content dominating the left side of the screen (heat map). So as not to crowd things up, I also want make liberal use of some white space to form boundaries between the columns and the actual edges of the display.

Starting off at 100% is the CSS body tag, which coincidently corresponds with the html tag of the same name. Since it is the first thing loaded style wise, I don’t really need to declare it as 100%, but give it a margin of 0. From what I understand, this is a good thing to do for maximum browser compatibility.

Arbitrarily, I want 2% white space on both sides of the screen, and about 1% between columns. My two narrow columns will be 15% each, and for vertical consistency between browsers, I will use a fixed length of 20 pixels of white space at the top of the page. Percentages work best on width, not so much length.

Now that we have used up 35 of 100%, it becomes easy to determine the width of the main content column. I give it 62%.

Aha, you say! That doesn’t add up!

In a perfect world it should be 65%. Neither Firefox, Safari, or IE are perfect, and each have their own way of converting pixels to percentages, and all will round up or down in different ways. So in the interest of browser compatibility, we give them plenty of room for error. How did I come up with 62%? Start at 65 and come down a percent until it works in all my browsers.

Since the content column comes first, I give it a 2% left margin and float it left to keep it on that side of the page. I gave sidebar1 a margin of 1% and floated it left to keep it in front of sidebar2.

Sidebar2 took some tweaking. I originally floated it left with a left margin but that didn’t work, in that it didn’t line up with the header. Since my main concern was the right edge of the screen, I gave it a right margin of 2% and floated it right. Voila!

Since the header consists of only one column, I just had to determine the height, give it a 2% left and right margin, and a 20 pixel margin at the top

As everything in the footer is going to be centered, I didn’t really have to give it its 2%, but I did anyway. The main thing for the footer is that it appears at the bottom of the page, and for it to do that, it has to clear all the columns both left and right. Thus the CSS class “.clearboth”.

And now, for the moment of truth:

Check the code:

CSS
As you can see, the three columns degrade gracefully as the screen resolution gets narrower. You may have also noticed that things seem a little squished in the 800×600 resolution.

Today’s screens are getting wider and wider. Look at your HDTV’s. What resolution is that? As developers, we have to know who our audience is, or who we are primarily developing for.

I choose to develop primarily for those who have 1024 to 1280 pixel screen widths. While 860 used to be the minimum standard, today it is more the norm for the visually impaired. That is not to say I do not want or value this group as an audience. There are ways to degrade a layout gracefully even down to the smallest of mobile devices. I don’t know how to do that yet, but it is on my agenda. So for now, I’ll stick to my primary audience.

Baby steps.

I’ll talk some about the header graphics in my next post. This one is already a little too wordy.

You can follow any responses to this entry through the RSS 2.0 feed.
You can leave a response, or trackback from your own site.