How to Build a Variable Width Website

Why would you want to build a variable-width website?

Because the range of screen widths on which people browse the internet now ranges from around 12 inches to twice that size.

And if you choose to view your PC through your TV you could be viewing web pages on screens many times bigger than people were using just a few years ago.

So if you build a fixed-width site that fits onto a 12 inch screen, the person using a wide-screen is going to see your site as a narrow strip down the middle.

Which doesn’t look so good.

Luckily, building a variable-width site is very easy, as long as you’re using CSS. And if you’re not yet building your sites with CSS you should really start. It greatly improves cross-browser compatibility and enables faster loading.

Building a site with CSS (as opposed to tables) means you need to think of the content of your site as being enclosed in a series of containers. These containers are called ‘divs’.

You start with your main container, or div, and then create smaller containers which sit inside it and which you position by telling them to float left or right. This creates the layout of your pages.

You style your divs (background colour, text alignment, font type, etc.) by defining those attributes in your stylesheet. And there are loads of free CSS editors that makes this process a real cinch.

You then put your content – text, images, scripts etc. – inside the relevant containers (divs), based on where you want it to appear on your page.

If you’re new to CSS and would like to learn there’s an excellent tutorial here.  This is the tutorial that got me started on CSS and it’s really worth a look if you’re new to CSS and interested in getting started.

So how do you create a variable-width site?

The easiest way is by specifying the width of your main div (the one that contains all the others) as a percentage value, rather than a specific width.

That will cause it to adjust to the specified percent of the width of the screen it’s being viewed on.

Some of your divs (for example the divs that form your sidebars) will probably have fixed widths specified. That’s fine, and they’ll retain their fixed width within your main div.

You do, though, need to make sure that the div containing your main content does not have a fixed width specified.

For example: if your page has a div which contains your primary content and a right sidebar which contains testimonials, you would typically specify the width of the div containing the right sidebar (for example 200px) and tell that div to float right.

You would then specify a right margin of 200 px for your content div, which would cause the divs to sit side by side. (Remember – these are enclosed within, and bounded by, the main div so they position themselves in relation to that).

However, although you’ve specified a right margin of 200 px for your content div, you’ve not specified a width.

This means that when the width of your main div expands because it’s being viewed on a wide screen, your content div is able to expand as well.

It will still retain a right margin of 200px and your sidebar div will retain its fixed width of 200 px, so the relationship of those two will not be changed.

A couple of things to keep in mind:

Make sure that your header and footer are designed so that they can accommodate varying widths.

That means that if you use an image in your header you need to put this into its own fixed width div, which will then sit (centred) inside your header div.

The width of the header div will expand and contract with the different screen sizes but your fixed width and centred div containing your header image will stay centred and in place.

You also need to consider images contained within your content.

As the width of your content div expands it may reduce the number of lines in a paragraph. So on a 12 inch screen a paragraph may have 6 lines but on a 24 inch screen this may reduce to 4, because of the extra line length.

Therefore you need to consider whether this would cause images contained within text to become incorrectly positioned.

I’ve just converted one of my sites (one of my secondary blogs which I didn’t mind experimenting on!) to a variable width site. I’m pleased with that one, and I now need to get started on the rest.

Update 7th May, 2009

I wrote another post expanding on this one when I came across a problem while converting my second site.

You can find it here.

Update 1st October, 2009

I eventually decided to move to a combination of fixed and variable widths – and wrote an updated article explaining why. You can find it here.

Other Articles You Might Like:

1. Variable Width Websites: An Update
2. Variable Width Websites: Another One Converted
3. How to Create a Search Engine Effective Web Page
4. How Does a Website Work?
5. Time for a little brag

Tagged as: css, variable width websites, web pages