Common Layout Sizes

Apr 28, 2008
by:   Tim Stanley

What size should you make your layout for a web site? Is there one layout that will fit all monitor sizes?

The basic width of a layout determines a lot of the internal layout sizes for panes, modules, images, and internal content. 

Some common layout widths.

  1. 960 pixels, 16 columns 10+40+10 pixels each
  2. 960 pixels, 12 columns 10+60+10 pixels each
  3. 820 pixels, 4 columns 10+180+10 pixels each + 10 pixel margin
  4. 740 pixels, 12 columns 10+40+10 pixels each + 10 pixel margin
  5. 740 pixels, 3 columns 10+220+10 + 10 pixel margin
  6. 740 pixels, 4 columns 10+160+10 + 10 pixel margin
  7. Yahoo UI, 750 pixels, 950 pixels, 974 pixels, 100%
  8. Blueprint CSS - 950 pixels, 24 columns, 30+10 pixels each

All of these layouts lead to some fairly common shared sizes for panes.  Any of these sizes will fit within the most common layouts.

  1. 520 pixels
  2. 460 pixels
  3. 240 pixels
  4. 180 pixels
  5. 120 pixels

820 4 Column Layout

740 3 Column Layout

740 4 Column Layout

References

  1. 960.gs
  2. Yahoo! UI Library: Grids CSS
  3. Blueprint CSS
Add to favorites Send to a friend Digg It! DZone It! StumbleUpon Technorati Reddit Del.icio.us NewsVine Furl BlinkList