XHTML column frameworks
I’ve often spent time developing column structures for websites. Structure is a good thing and it’s essential to keep your design looking consistent across a number of website pages. Newspapers all run on complex column grid systems and have done for years. Websites are really no different. Even if you have an irregular design, you’ll still benefit from a little underlying structure.
The following shows one of the more common column structures, with splits for 2 to 6 equally spaced columns. It’s based on a 720 pixel width, so will sit nicely on 800×600.
There are a number of other column sets that split nicely into whole (pixel) numbers. Read on if you’re interested.
It’s all based around “60”
This number is divisible by 2,3,4,5 & 6. As long as your page width is a multiple of this number then you’ll be able to break it down into 2 to 6 equal columns with no problems.
I’ve compiled a list of the most common sets you are likely to use. Each example is based around a page width and has a diagram breaking down the column structure for the most common layouts.
- 2 equal columns (1:1)
- 3 equal columns (1:1:1)
- 4 equal columns (1:1:1:1)
- 5 equal columns (1:1:1:1:1)
- 6 equal columns (1:1:1:1:1:1)
- 2 columns (1:2)
- 2 columns (1:3)
- 2 columns (2:3)
- 3 columns (1:2:2)
- 3 columns (1:2:1)
Page widths available (in pixels):
- 600 (suitable for 640×480)
- 720 (suitable for 800×600)
- 780 (just about suitable for 800×600)
- 840 (suitable for 1024×768)
- 900 (suitable for 1024×768)
- 960 (suitable for 1024×768)
600 pixel page width (suitable for 640×480)
720 pixel page width (suitable for 800×600)
780 pixel page width (just about suitable for 800×600)
840 pixel page width (suitable for 1024×768)
900 pixel page width (suitable for 1024×768)
960 pixel page width (suitable for 1024×768)
I hope this serves as a good reference. Happy designing!
February 28th, 2007 at 4:30 pm
Nice one Paul! You’ve tallked about publishing this for some time now, so I’m glad it’s finally online.
I’ve worked with you and your column structures for years now, but I never new that it was all about that magic 60.
February 28th, 2007 at 4:35 pm
It took too long for that realisation to hit me also!
You’ll notice some of the older work doesn’t have a magic 60 divisible page width – though sometimes you have to work within restrictions and keep to some long standing conventions; particularly in the case of Monster.
February 28th, 2007 at 4:40 pm
[…] PE » Blog Archive » XHTML column frameworks […]
February 28th, 2007 at 4:45 pm
Obviously becaue of Monster’s 33px gutter between the main and sub columns right?
February 28th, 2007 at 4:58 pm
Never really liked that. I now think that it’s best to leave “guttering*” to the internal contents of the column. I guess it’s more semantic too.
* Guttering being the act of creating space between columns!
February 28th, 2007 at 5:33 pm
Excellent, thanks steve.
It sure beats my complex photoshop template grid file.
Many different sizes you might design for, all at a glance.
Cool, gracias
February 28th, 2007 at 5:36 pm
Just had another thought.
Blast these up to actual size, and drop ‘em in a photoshop file for a grid starter reference.
Maybe you could link actual size images? That would be peachie!
February 28th, 2007 at 5:56 pm
Nice idea. I’ll do that.
February 28th, 2007 at 7:38 pm
Nice and all but youre not taking gutters into account with these grids. If you add 10pixels on each side of each line on for say the 3 column grid you get a middle column that isnt the same width as the side columns.
February 28th, 2007 at 11:20 pm
A good point David. No, I’ve purposely not taken gutters into account here. You always have to vary the gutter width for different column splits to get whole numbers.
I’ve used some of these in the past, but now think it’s worth creating gutters by using the columns internal padding or margins for embedded elements. You can also produce the (psuedo) visual effect of a gutter by using a background image with repeat-y on a column div.
March 1st, 2007 at 6:38 am
XHTML column frameworks…
Paul Evans has an very nice post on Column Structures for Websites. Nicely written and something which designers should keep in mind as well. Click on the link below to know more about the Column Frameworks
XHTML Column Frameworks
……
March 1st, 2007 at 1:07 pm
[…] Newspapers all run on complex column grid systems. Websites are really no different. Paul Evans has published a list of the most common column structures you’re likely to use when designing a web site, each with a useful, quick reference diagram. XHTML column frameworks […]
March 1st, 2007 at 2:37 pm
[…] Here’s a handy list of some common column structures, each with a useful diagram. […]
March 1st, 2007 at 2:42 pm
As simple & logical as it is, this is brilliant!! Will be very helpful for our projects.
Just off the top of my head, I think if the measurements are in percentage (eg. 720=72%) the layout would be liquid. Right?
Thanks again.
March 1st, 2007 at 2:58 pm
Thanks ‘Effendy’. These dimensions are just for fixed size designs. If you want liquid layouts you’ll have to respecify everything (or the columns you need) as percentages. Which is obviously easier as internal columns can be 33% for 3, 25% for 4 and so on.
The fixed Vs liquid (or fluid) structure is an interesting debate, perhaps I’ll blog on that one soon!? :-/
March 2nd, 2007 at 5:20 am
[…] PE » Blog Archive » XHTML column frameworks A couple of column layout templates (tags: column css design reference templates) […]
March 3rd, 2007 at 6:44 pm
I’d like to see one for 760, as 780 will almost cause a scrollbar in 800×600 and I like to have 10px on each side for drop shadows.
March 5th, 2007 at 10:26 am
Yes, 780 is very borderline when it comes to 800×600 - it can cause scrollbars on some browsers (particularly those with sidebars) - but this often comes down to user preferences.
760 does not divide down into 3 or 6 - that’s why it’s not here. I’ve concentrated on those that divide down into neat, whole numbers.
March 23rd, 2007 at 2:33 pm
Great write-up. It’ll definitely come in handy. I printed out a copy of the different permutations, and put in my reference file.
July 24th, 2007 at 4:20 pm
I’m glad to find someone else who agrees that it’s all about the structure of the page. I do freelance website design, and I have clients who don’t understand why I keep saying everything needs to be in columns or tables. They don’t get the idea that having an underlying structure, even if it includes columns or table rows that aren’t used, is a good thing because it keeps everything in place. I do have to admit, though, that I’ve stopped using tables now that I have Microsoft Expression. The layer ability seems to keep everything where it should be while allowing for overlapping content. Also, as Effendy pointed out, with so many different screen sizes and resolutions out there, nearly everyone wants their website fluid so it adjusts to everyone’s screen size and looks halfway decent for everyone, so while fixed columns are a good idea sometimes, I’m not sure how much longer they will be around in web design.
August 14th, 2007 at 5:11 am
Excellent, thanks steve.
It sure beats my complex photoshop template grid file.