Visit any web design newsgroups or 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 various columns on your web page is specified in pixels. For example, the following HTML snippet will produce a table that is 597 pixels wide:
Likewise, a CSS style that uses a fixed width for a DIV block might look like this:
A relative width, or a liquid or elastic layout, is usually specified as a percentage of the width of the visitor's viewing window or relative to the size of the visitor's fonts. Hence the following snippet will produce a table that occupies 80 percent of the screen:
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). Your visitor never needs to scroll horizontally to read your page, something that is 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 the more reasonable 1024x768 display.
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 800x600 or a 1024x768 display. If however, you have a wider display, try viewing it with your browser window expanded to its maximum width (ie, "maximize" it, in Windows lingo).
Did you 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 an elementary school essay - with single lined paragraphs and lots of space in between. Each time you have to 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 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, and as long as the CSS and HTML standards do not allow web authors to specify things like "if resolution falls below 640 pixels, use a fixed width of 640, else use a relative width of 80% (etc)", 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, although of course it may cause grief for people with lower resolutions than what you designed for. You should probably test your page under a 800x600 resolution to check if the problems visitors have with that screen resolution are tolerable.
If you do not need such a tight control, you might prefer to go with the advice of the majority of web design guides and use relative widths for your site. You still need to test your page under a 800x600 resolution to see if your layout and alignment goes haywire 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 1680x1050 resolution system views that page, he'll see an undistorted copy of your page in a sea of white space.
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.
And of course when they invent the 3000x2000 displays...
Copyright 2000-2007 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/
If you find this article useful, please consider making a donation.
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 our 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
