Visit any web design newsgroup or read any of the web authoring guides on the web and you will probably encounter a number of people proclaiming the evils of having a fixed width for your page layout and recommending that you use relative widths, or a liquid or elastic layout, instead. On the other hand, if you view the source HTML for some of the websites you visit, you will find that a large number of them use fixed widths for their page layouts. Which should you use? As we will find out in this article, the issue is not as straightforward as the proponents of relative widths make out.
For the uninitiated, a fixed width is one where the width of the web page does not change no matter how big or small your visitor's monitor is. An example of this can be found seen in the Feedback Form Wizard Demo Site. The main content section of that site has a fixed width, and on large monitors, the section will appear in the middle of the screen surrounded by unused space. On small monitors, or if you resize your browser below 800 pixels wide, you will have to scroll left and right in order to view all the content.
On the other hand, a site layout that uses relative width will expand and contract to fit the size of your browser window. An example of this is thesitewizard.com itself. Notice how this article fills the entire width of your browser window, even if you maximize your browser window.
The arguments raised in favour of giving your layouts a relative width or liquid layout usually revolve around the fact that such layouts yield pages that work regardless of the visitor's screen resolution.
For example, a width of "100%" will always span the entire width of the browser window whether the visitor has a 640x468 display or a 1024x768 display (etc). In order to read your page, your visitor never needs to scroll horizontally, something regarded by most people as being very annoying.
With relative widths, you need not worry whether to code for a restrictive 800x600 display, or for a 1680x1050 display.
As mentioned above, at the time of this writing, the pages on thesitewizard.com were constructed with relative widths. They probably look fine if you were using a 1024x768 or 1200x800 display. If however, you have a very wide display, try viewing it with your browser window expanded to its maximum width.
Notice that a number of the paragraphs that used to occupy a decent few lines are now displayed as single lines? The article now looks like a young kid's essay — with single lined paragraphs and lots of space in between. Each time you read a line, your eyes have to travel the long distance between both ends of your huge monitor.
Essentially, when you use a liquid layout, you have less control over the appearance of your page. It will appear as wide or as narrow as your visitor's browser. As a result, when the browser window gets too wide, everything will appear stretched out. When the browser window gets too narrow, your text and graphics in the various columns will suddenly be horribly misaligned.
If you were to create a fixed layout, the elements in the page will retain their proportion regardless of the visitor's screen resolution. Of course if the resolution drops below the fixed width you assigned, the visitor would have to scroll horizontally. But at least your page still appears as you planned.
With all the foregoing, which should you use? As long as screen resolutions continue to be as varied as it is now, no single solution is going to satisfy everyone.
Generally speaking, if you want tighter control over the appearance of your pages, fixed widths might be the route you have to take. People who have graphical elements on their page that must absolutely align with other graphics or text will probably need to use a fixed layout, or your images may not appear where they are supposed to when your visitors use a monitor with a different resolution than you.
In such a case, make sure that you set the fixed size at a reasonable width so that people using a resolution like 1024x768 (which is still being used by a lot of computer users at the time I write this) can still view your page without having to scroll horizontally. Note that you do not have to get a 1024x768 monitor just to test under that resolution. If you have a wider monitor, you can always resize your browser smaller. One way to do this is mentioned in the article How to Test Your Website Under Different Screen Resolutions under Windows the Easy Way.
If you do not need such a tight control, you can freely use relative widths for your site, although you may still want to test your page under a 1024x768 resolution to see if your layout and alignment goes askew under a lower resolution.
Incidentally, using fixed widths does not mean that your page will look fine under higher resolutions. If your page has a fixed width of say 800 pixels, and a visitor using a 1900x1200 resolution system views that page, he'll see an undistorted copy of your page in a sea of white space. Like I said, neither of these solutions are perfect. We're not talking about a printed medium here, where the paper size is fixed the moment you choose it. A web page has to work under a very large set of possible conditions.
Those wondering how to implement either fixed or relative widths on your site may want to take a look at the following tutorials as starting points.
If you are using the Dreamweaver web editor, some practical information on how to use fixed or relative widths for your website can be found in the tutorial How to Make Your Website to Fill an Entire Browser Window with Dreamweaver.
Those using either KompoZer or Nvu may be interested in the article How to Prevent Your Images or Text from Going Out of Alignment When Your Visitors Resize Their Web Browsers in Nvu/KompoZer.
I suspect that any reader hand-coding their website directly in HTML and CSS already knows how to implement the things mentioned here. However, for those new to this, see How to Design a Two Column Layout for Your Website Using CSS. If you're making a fixed width site, you will probably also want to centre your columns. In such a case, you may be interested in learning How to Centre a DIV Block Using CSS as well.
Designing for different resolutions can sometimes seem like you are standing between a rock and a hard place. Don't believe the people who say that the use of one method over the other will solve all your problems. You still have to test your pages under a reasonably high resolution and a low resolution to see how it appears. In most cases, you will have to live with some imperfections when your site is viewed under extreme settings.
Copyright 2000-2009 by Christopher Heng. All rights reserved.
Get more free tips and articles like this,
on web design, promotion, revenue and scripting, from http://www.thesitewizard.com/
Do you find this article useful? You can learn of new articles and scripts that are published on thesitewizard.com by subscribing to the RSS feed. Simply point your RSS feed reader or a browser that supports RSS feeds at http://www.thesitewizard.com/thesitewizard.xml. You can read more about how to subscribe to RSS site feeds from my RSS FAQ.
This article is copyrighted. Please do not reproduce this article in whole or part, in any form, without obtaining my written permission.
It will appear on your page as:
The Great Fixed Vs Relative Width Page Layout Debate
