Fixed or fluid?

When it comes to designing a web site, one of the decisions you have to make is how wide your design is: does it expand to whatever the width of the browser window is, or is it fixed at a specified width, and if so how wide should that be? Looking at other web sites there are good and bad examples of each, which leads us to conclude that it’s not so much which option you choose as how well you make use of it. In this tutorial we are going to look at the options, show you how to create each version, and point out some pros and cons for each. 

1. The basic fixed width option

The simplest of all the solutions involves simply putting everything in a DIV and specifying its width. By default this will align itself left and as long as it’s not set too wide will work perfectly on any browser.

  1. div#page { width: 800px; }
  2. ...
  3. <div id="page">
  4. content goes here
  5. </div>

Examples: BBC, LloydsTSB

Pros: Predictability. Whatever you put on your page, you know how many pixels you have to work with. If you are placing images, you know how wide they can be, and you can rest assured that if there is room for everything on your computer, any other computer should display it much the same.

Cons: On large screens, a web site that is only 800px wide might look a little odd, especially if it’s stuck on the left hand side of the screen - it will leave a big empty space on the right that will be completely unused. Not only does this come across as unnecessary but also inefficient use of space. It’s also a restriction, only having a set maximum width, and means that if you have any content larger than that it’ll need to be scaled down before it’ll fit.

Comments: When choosing a width, bear in mind your target audience. Not everyone has nice big screens, so you need to cater for screens as small as 800×600 just to be on the safe side. That means a maximum width of 800px, which by modern standards isn’t much. Of course, artistically you could go smaller, for a thin web site style, just don’t expect to squeeze much on horizontally as a result.

2. Fixed width centred

A variation on the above that actually works very well, especially if put on a well-thought-out background, whether that’s a complimentary background image or a contrasting background colour. Actually getting the page centred can be a bit complicated, as no one solution will be guaranteed to work on all browsers (this is mainly down to the dodgy rendering of Internet Explorer). The first solution is to use margins and take advantage of the browser’s built-in ability to work out how much space is available. By setting the left and right margins to auto the browser should adjust the margins so that they are equal. Unfortunately IE6 doesn’t quite know what to do, so another line is needed to take advantage of another quirk in its rendering, whereby setting text-align to center it will center the DIV as well, which isn’t quite correct and has to be undone so that everything else doesn’t align itself center as well.

  1. body { text-align: center; }
  2. #page { width: 800px; margin: 0 auto; text-align: left; }

The other option, is to use negative margins to achieve the same result. The idea here is to set the left margin to 50%, which would align the left hand side of the page with the very centre of the browser window. Then by using a negative margin equal to half the width of the page we can manually offset the page relative to the centre. This works nicely in pretty much all browsers, but be wary of the resultant issues when the browser window is set to smaller than the width of the page - the page will overflow on both sides of the window and you’ll only be able to scroll horizontally right, not left, so you risk losing some of the web page completely. If you can put up with that, this is a nifty solution that works very well.

  1. #page { width: 800px; position: absolute; top: 0; left: 50%; margin-left: -400px; }

Examples: Apple

Pros: sits nicely on any size of screen and has the same predictable width as the basic fixed width solution. Even resizing the browser window after the page has loaded will keep the page centred.

Cons: with the second version parts of the page can become lost on very small browser windows.

Comments: This is a favoured solution for many web sites, as it gives the consistency of a fixed width canvas with the added bonus of being artistically centred on the screen, making it a clear focal point.

3. Fluid width fills the screen

This is a more advanced solution, which expands to whatever the size of the browser is, which makes the most of the space its given, but also throws in some layout complications that need to be carefully considered. For instance, will there be any issues if someone decides to reduce the window size to 300px? Will it look ridiculous at 1800px wide? For instance, if you have some images floating in your body text with the text flowing nicely around it, how will it look at various widths?

When it comes to coding the layout, absolute widths are out. You’ll need to use percentages to make the most of the fluid concept. For instance, on a page with a header, footer, side menu and content area, you will probably want the menu to take up no more than 40% of the screen, possibly as little as 20%. Header and footer heights can be specified in pixels of course, and by default a DIV will use all the available width, so we don’t have to worry too much about them. Let’s look at a simple example:

  1. #header { height: 100px; }
  2. #menubar { width: 30%; float: left; }
  3. #middle { width: 70%; float: right; }
  4. #footer { clear: both; height: 40px; }
  5. ...
  6. <body>
  7. <div id="header"></div>
  8. <div id="menubar">
  9. ...
  10. </div>
  11. <div id="middle">
  12. <p>content goes here</p>
  13. </div>
  14. <div id="footer"></div>
  15. </body>

However, there are some problems here to be addressed. Internet Explorer can’t count for some reason, and thinks that 30% + 70% is more than 100% and refuses to let both the menu and the middle boxes sit next to each other. The simplest solution is to reduce one of them by a fraction of a percent; IE will now be persuaded that there is enough room, and the rendering is unlikely to show the difference on screen. Also worth pointing out is that there is no padding on anything yet, which means that the text will be right up against the borders of the boxes. Adding padding to those boxes will actually increase the overall width of them, unfortunately, which would mean that there is no longer room for everything, so the best option is to nest another DIV inside and give that padding instead. Finally, addressing the problem of floated images and suchlike in the main content area exceeding the boundaries of the content area, we put a clearing DIV at the bottom of the middle area to make sure that everything stays neat and tidy. It won’t be seen, but it’ll keep everything in place properly.

  1. #header { height: 100px; }
  2. #menubar { width: 30%; float: left; }
  3. #middle { width: 69.9%; float: right; }
  4. .padding { padding: 20px; }
  5. .clear { clear: both; }
  6. #footer { clear: both; height: 40px; }
  7. ...
  8. <body>
  9. <div id="header"></div>
  10. <div id="menubar">
  11. <div class="padding">
  12. ...
  13. </div>
  14. </div>
  15. <div id="middle">
  16. <div class="padding">
  17. <p>content goes here</p>
  18. ...
  19. <div class="clear"></div>
  20. </div>
  21. </div>
  22. <div id="footer"></div>
  23. </body>

Examples: eBay, Google

Pros: Makes the best use of screen real-estate, looks good at any size on any computer, no maximum or minimum size to view web site, no horizontal scroll bar.

Cons: Harder to absolutely position things, more care needed that layouts will work at all resolutions.

Comments: If you have a lot of information to display on one page, this technique ensures that you make use of all the available screen space, which will help to ensure that your page doesn’t look too crowded. At the same time, you’ll need to take extra precautions that scaling the page doesn’t break the layout with conflicting floats or overlapping objects.

4. Centred fluid layouts

Ok, so let’s say you like the look of a fixed-width centred page, but would like the flexibility of a fluid layout. Well you’ll be pleased to know that you can have your cake and eat it! Simply use percentages instead of absolute values with the centred model, take a few precautions to make sure nothing gets put in the wrong place when scaled, and that’s it. In the example below there is a 10px margin top and bottom too, just to give it some space there too - sadly percentages don’t work vertically.

  1. #page { margin: 10px 10%; }

Examples: Orchard Baptist Church

Pros: Tidy look and feel of a fixed width design but with a more flexible outcome - the side margins will look proportional at any screen resolution.

Cons: Watch out for floated objects or anything with a fixed width in the body of your page that might cause problems, such as menu bars or large images.

Comments: This technique works really well, and if care is taken to ensure scaling doesn’t mess up the layout it can be an effective solution in any situation.

5. Fluid width with minimum and maximum sizes

The problem with fluid width designs is that you have no control over how the web page looks on anyone’s computer. It can look fine on your screen, but give it to a friend to look at and cracks could easily appear. One key design problem to be overcome is scaling to extremes. On small 800×600 screens things can all too easily look overcrowded and messy, and you’ll be at risk of wide objects like horizontal menus wrapping round if there isn’t enough space for it all on one line. Similarly, on enormous 24″ screens as used by high-end computer users, you will find that what looked like a lengthy paragraph takes up only a couple of lines, which not only looks unsightly but also makes it harder to read. What’s needed is the flexibility of a fluid layout but within certain limits.

Sadly, IE6 fails us again, as this technique uses CSS that it ignores, but in pretty much every other browser it’ll work a treat. By setting max-width and min-width on your page you can let your page scale nicely between two limits, ensuring that things never get out of hand. Some people still use those small resolution screens, so we’d better not forget them, so try not to set the minimum width to more than 800px if you can help it. Then it’s just a case of choosing a maximum width that suits your design; I find 1400px is plenty in most cases.

  1. #page { margin: 0 50px; max-width: 1400px; min-width: 400px; }

Examples: Diocese of Chelmsford

Pros: All the benefits of fluid width, reliability of knowing that the web site won’t break by being scaled to 100px wide, and that paragraphs will still look like paragraphs on giant monitors.

Cons: Doesn’t work in IE6 or below.

Comments: Really nifty solution, and doesn’t break horribly in IE6 - the upper and lower limits won’t come into play, but the web page will still display, just with the risk of scroll bars.

Matthew