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 on the Fixed Width Layout Demo Page. The main content section of that page 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 ("favor" if you use a different variant of English) 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.
For a site like thesitewizard.com, where there are no pictures and words that need to be aligned with each other, relative width layouts work fine, and is, in my opinion, ideal.
However, if your website has items that is placement-sensitive, for example, where some words in one column need to match up with either pictures in another column or other words, then a fixed width layout is preferable. Fixed widths allow you to position items on your page and have it look exactly the same whether it is displayed in a huge window (eg, with 1920x1200 or 2560x1600) or a small window (eg 1024x768). Using relative widths for such a site will cause all the words and pictures to be placed in a different location from what you intended when it is viewed on a screen that has a resolution other than what you used when designing your page.
Of course this means that your site will face the same issues as those faced by the Fixed Width Layout Demo Page. The page is frozen at a specific size, and if you view it in a very small window, you can only see a small fraction of the page. If you look at it in a very big window (eg, on a monitor with 1920 pixels width), it will only use up a small part of the available screen space, wasting the rest.
In summary, when you use a liquid layout, you have less control over the appearance of your page. When the browser window is too wide, your content will fill out the space available, possibly misaligning them. Likewise, when the window is too narrow, the browser will try to fit your text and graphics in that little space, moving things to a new line if needed, possibly changing their alignment.
If you were to create a fixed layout, the elements in the page will retain their placement in relation to each other, 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.
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 fit every site.
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 number of people at the time I wrote 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 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 1920x1200 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 is 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 advocate one method over all others as the panacea for all web design problems. Every site is different, and requires the designer to think through the issues and decide on a solution. Whichever method you choose, you will still need 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-2016 by Christopher Heng. All rights reserved.
Get more free tips and articles like this,
on web design, promotion, revenue and scripting, from https://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 https://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 or distribute this article in whole or part, in any form.
It will appear on your page as:
The Great Fixed Vs Relative Width Page Layout Debate
