22i design - web design Farnborough

Wednesday, November 13, 2019

This page uses Valid CSS
Valid HTML 4.01!
For what it's worth, 22i design is a member of the UKWDA
Get FireFox - The Browser ReLoaded

22i DESiGN » WEB DESiGN TiPS » Fixed Width or 100%?

Fixed Width or 100%?

So - do you design a website for fixed width or 100% width? What do you mean?

Well, a fixed width page or a fixed width site will be exactly that - a fixed width. Being oldschool I'm used to the time when everyone had 800x600 desktops and, allowing for browser scrollbars and the like, you'd probably design a website or a webpage to 760px wide. This page is fixed width :)

A 100% width page or a fluid, dynamic, or liquid design will fully stretch to fit the screen widthways on any desktop, so it will cover the screen on any size.

"But I've got a 17 inch monitor"

Now, let's pop this bubble straight away. If you have an 800x600 desktop and a 15" monitor it will still be 800x600 if you plug in a 17", 19", 21" or a 30" monitor. Comprendez? Screen size and desktop resolution are different so please don't mix them up.


Once upon a time we designed for 640x480 desktops .

Now many people are designing mainly for 1024x768 desktops.

Times change.

But remember - you should really work to the lowest common denominator. The 640x480 is a rarity these days and Windows XP has a native minimum desktop of 800x600 so something like a 760px page will do nicely.

"But what about the 1600x1200 desktops and wider?"

I hear you say. Well, on a 1600 width desktop your fixed width page or website will only cover half the screen. The choice is yours but remember that there are advantages and disadvantages to both methods...



  • Everyone will see the site the same size.
  • Users with smaller desktops will be able to see the page as it was intended
  • Planning content is much easier - if you have text to wrap around images, for instance, then you can plan your design almost perfectly.
  • Not everyone has a big desktop.
  • Readability - short lines are easier and more comfortable to read - why do you think newspapers are written in columns?


  • On big desktops you'll see a lot of space - this may be a disadvantage/discomfort to some people.



  • Great aesthetic - the page fills on all desktop sizes
  • Shows you care about every desktop size :)


  • Planning - Ah, that image looked good with the text wrapped around it on an 800x600 but at 1600x1200 it looks bad! Planning (and testing) is harder with 100% widths.
  • Readability - long lines are uncomfortable to read.

"Ah but, I've heard..."

Yes, I know, you can design for a minimum and a maximum width. "How do you do that?" OK, it's a style sheet thing. You need to create a div or container for your page and place all of your page within the div, let's call this one "container"... this example is for 800-1024px resolutions, allowing for scrollbars in the web browser.

.container { min-width: 760px; max-width: 944px;}

Then you'd create your content to work at the minimum and maximums of 760 and 944 pixels. And don't forget to test them too ;)