Fixed or Floating Layout

The advances in browsers support for stylesheet commands now means that the need to use tables to try to force a page to appear the way that you want has now gone the way of the dinosaurs. Those who continue to use tables for layout (something that they were never intended to do in the first place) are as right as those who believe the Earth is flat. The Earth is relatively flat provided that you only look at a part of it and you can use tables for layout provided that you only want a simple layout and don't care that a growing percentage of visitors are using alternate devices to view web pages that your table layout can't handle.

Let's assue that the tables versus stylesheets for layout is well and truly over as stylesheets which were designed for layoing out pages are the clear winner when it comes to anything beyond the most basic of page layouts. That then leads us into the next challenging question that people need to answer when designing their pages - "Should you use a fixed or floating layout for your page design?"

This question is far more interesting because there are pros and cons to both approaches. Let's start by considering how big a viewable area that people are likely to be using to view your web page.

The one thing that we can determine from this is that there is no one fixed width layout that will satisfy the needs of all of the visitors to our web page. Does this mean that a floating layout is the way to go? Not necessarily.

The problem with a floating layout is that at least some of the content of our web page has a fixed width (eg. images). Such fixed width items will place a lower limit on how narrow that the page can go. If we have content that needs to be displayed in a predefined position relative to other content then this too may limit how narrow our page content can get. Such restrictions may make your page unsuitable for viewing in a PDA (unless you drop the image or resize it). It may also make your page unusable ifpeople viewing it on a computer make their browser window too narrow for your page content to fit properly.

Another problem can occur if your visitors are using really high screen resolutions as if your layout becomes too wide and short it can be just as difficult to work as if it becomes too narrow and tall. You may have items on the page that only make proper sense when they appear directly above or below other items. In any case a line of text that is too short or too long is harder to read.

some people argue that if someone opens up their browser so that the page is thousands of pixels wide then that is because they want it that way and that you should let them see your page speead out across the full width like they want. Others prefer that the page not be stretched too far out of shape in either direction regardless of how their visitor has their browser set.

Another aspect that needs to be considered at this point is that if your visitors really prefer to see your web page laid out a particular way then they can easily change the dimensions of their browser window (if they have it set smaller than full screen) or define their own stylesheet commands to override yours. If they really want pages stretched out of shape to fill the full width of their screen then they can use stylesheet commands to force your page to appear that way.

Further to this your visitors can also use their own stylesheet commands or browser settings to override your choice of font sizes for the text content of your page. If you have set up fixed sized areas to display your text based on the font size that you have selected then either their smaller font selection will result in blank space in your layout or their larger font selection will mean that your text overflows its container.

As you can see there are arguments in favour of both fixed and floating page layouts for web pages. Each has its advantages and disadvantages (and there are too many to list here). of course rather than using either a fixed or floating layout you can use a compromise between the two. By specifying the right combination of stylesheet commands you can specify a minimum and maximum width for your web page and allow the width of the page to float between the two. For example at the time of writing this the web pages on this site are designed to use a minimum width of 570 pixels and a maximum width of 850 pixels. The browser will display the page to fill 96% of the available width in the browser window provided that the content does not end up becoming narrower or wider than those limits in which case the limit size will apply. In my opinion this hybrid design approach achieves more of the advantages and less of the disadvantages of either of the two approaches that it combines together.


This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow