Wealthy Affiliate will teach you how to build a long term business

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 computer 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 start. It greatly improves cross-browser compatibility and enables faster loading.

A very brief intro to CSS follows but if you’re already familiar with that and want to go straight to variable widths then click here.

The concept behind CSS

CSS is about separating the design elements of a site from the content. This makes is easier to retain consistency of design throughout, particularly when making styling changes.

For example, if you want to change the way links are displayed you only need to do it in one place: the stylesheet. The new style links will then be displayed throughout your site.

CSS structure is like Russian dolls

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, font-size, etc.) by defining those attributes in your stylesheet. And there are loads of free CSS editors that makes this process a real cinch.

Divs should be used once on a page

Each div must have a unique name and you should only use the same div once on each page. For example, one container div, one content-box div, etc.

Classes can be used many times on a page

You also have entities called ‘classes’.

Classes can be used many times on one page. An example might be for styling specific types of links.

Let’s say you wanted to use a different style of link for a specific purpose. The first step would be to define the styles for this link and give it a class name.

Then, whenever you wanted the links to be displayed in your newly-defined style you would specify either <span class="name-of-class"> or <a class="name-of-class">. That would cause those links to be styled differently from the default.

Creating a site: design and layout first

When I’m creating a hand-built website I create the design and layout first.

To make this easier I initially give each div a different background colour so that when I preview the design and layout I can clearly see where each div begins and ends.

Once you’re satisfied with the way the site is laid out you can remove the background colours and start adding your content.

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 website?

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 few things to keep in mind

Make sure that your header and footer are designed so that they can accommodate varying screen widths (their widths should either not be specified or specified as a percent).

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.

Wealthy Affiliate will teach you how to build a long term business

Comments on this entry are closed.

  • Sean 19 January, 2009, 12:29 pm

    Thanks for this tutorial Martin, it was very helpful.

    Is it possible to have an outer div, then have another outer div inside that ? ie a div in a div in a div ? I’ve been trying to get that to work but my 3rd div always breaks out of the first container div.

    I’ve resorted to changing my layout but I really prefer not to….

    Sean´s last blog post..A great Firefox Plugin – MeasureIt

    • WealthyDragon 19 January, 2009, 9:42 pm

      Sean, hi,

      A div within a div within a div is absolutely possible, but you may need to specify width or margin parameters for the inner divs. Check out this page:

      http://www.best-familyvacations.net/

      … and look for the little beige box on the left of the main content area, just below the blue panel, that contains the links to ‘Cheap Flights, etc…’. That is actually a div within a div within a div within a div (4 levels).

      The first div is the page div, which is my main container. Within that is the page-container div (illogical terminology, I know – it’s just my name for it! It’s the second div.). The difference in widths of those two divs, and the top and bottom margins of the page-container div, is how I create the white margin space round the outside of the content area (the bit which contains the header image, footer area, sidebar and the main content).

      Within the page-container div is the content div, which is the main text area – i.e. excluding the sidebar, which is in its own div. And within the content div is that div which contains those links. Plus – all the images are in their own divs as well.

      I’m not sure why your divs are breaking out, but first thought is to make sure you close all your div tags. It’s easy enough to leave one open if you have lots of them! Second thought is that your inner divs will need to be smaller than your main div.

      You can specify this size as a percentage (of the main div) or a fixed value (but smaller than the main div), or just give the inner divs a right or left margin. Any of those should work.

      If none of them do, paste your stylesheet and your page source into a couple of files and let me see if I can spot the gremlin. (But it won’t be till the weekend as I’m in KL at the moment on a biz trip for PCCW).

      Cheers,

      Martin.

  • Euroangel 22 January, 2009, 5:00 am

    thanks for this very good info!! added you too in BC..have a great day!!

    Euroangel´s last blog post..Beautiful Hohenfels, Germany

    • WealthyDragon 22 January, 2009, 11:14 am

      Hi Euroangel,

      Glad it was useful and I added you back in BC as well!

      Cheers,

      Martin.

  • Noumenon 20 April, 2009, 3:22 pm

    Thanks very much for the tutorial. Because I’m (more or less) limited to using this one theme for my blog, and because I have almost no html knowledge, I’m attacking the code with all the skill of a blind lumberjack in an operating theatre to tweak it. But you helped, so I’ll be bookmarking and browsing you again in the future. Thanks again!

    • WealthyDragon 20 April, 2009, 4:17 pm

      LOL..!

      You’re welcome and I’m glad it was helpful!

      Thanks for visiting, cheers,

      Martin.