Capped Fluid Width Webpage Design
A capped width fluid web page
for those that have read the post on fluid versus fixed webpages, you will know what I’m talking about when I say “the Oprah effect”.
I discussed some of the benefits of a capped width, fluid web page. In other words, the page will expand with wider monitors, only to a pre determined width. Beyond that point, it will stop expanding, and the body either side of the page will expand. I’m sure you can see the reasons why this is beneficial.
A Little background On This Method
When I first decided to try and build web pages this way, I researched any information I could about it. And guess what? There wasn’t any – or very little.
So, was it something that couldn’t be done? Or perhaps it could be, but those that knew how weren’t saying? Either way, if I wanted to do this, I had to find the way myself, there was no simple step by step tutorial to help me.
So lets quickly recap what we want, and then we can get on with how to do it.
- A page that looks good at all screen resolutions.
- A page that will expand and contract
- One that will stay centered
- A page that knows when to stop expanding
- And it must work with all OS and in all mainstream browsers.
An overview on how it works
Let’s take a high altitude view of how it’s going to come together, before we get to the specifics. For those that know a little css, you will realize that a simple max-width:some value; simply isn’t going to do the job.
For a start, Internet Explorer has no idea what that means. So what does IE understand? Well, a javascript expression that does a similar job to the max-width property.
We also need to consider the page centering – it can get quite messy if we don’t do things the right way. So, Im going to assume you’re using an external stylesheet, and show you what you need to add to that and your HTML page to get a perfectly behaved capped width page.
The stylesheet
On any stylesheet, you generally start off adding properties to the body selector. This isn’t intended as a css tutorial, but perhaps we need to be clear on what I mean.
Very basic css is comprised of 3 parts – a selector, a property, and a value, set out like this.
body{max-width:1050px;} where body is the selector, max-width is the property, and 1050px is the value. Ok, that’s simple enough.
So let’s assume you have a simple 3 column table layout on the page, with the styling in an offpage stylesheet. You could simply set the table width to 90% and leave it at that.
What happens then? the table will be at 90% width, regardless of how wide the monitor is (the resolution of the screen, to be more precise). So we are going to tell the page, occupy 90% of the width of the screen, up to a maximum width of 1050px, and remain centered at all times. Shouldn’t be too hard, should it?
First part of the stylesheet
body {
max-width: 1000px;
background-color:#bccbf2;
font-family: Arial, Verdana, sans-serif;
font-size: 93%;
color: #000;
margin:auto;
padding:0;
text-align:center;
}
Only the bold parts of this are required, the other properties are entirely optional. So, if we are going to be using a 3 column table for our page design, why have we put the max-width property up here in the body selector, and not in the following code which deals specifically with the table?
Im sure inquiring minds will want to know this – so more on that later.
Next part of the stylesheet
.main-table {
width:expression(document.body.clientWidth > 1002? “1000px”: “auto” );
font-size: 93%;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
This is whats known as a javascript expression. IE can understand this whereas the max-width we used earlier will work for Firefox, and other browsers.
So let’s look at what this expression is really saying. document.body.clientWidth > 1002? “1000px”: “auto” Is the page wider than 1002px? If so, then make it 100px wide. Why are those 2 values different?
because IE6 has a slight bug. If they are identical values, then it will loop the code – result is a frozen screen.
Centering The Page
So, how are we going to ensure the page is centered? Actually, we have already done that! I said earlier I would explain why the max-width property was put with the body selector, rather than down here with the table.
Take a look at the table properties for a minute. You will see that I have set the left and right margins to auto. What the means, is that the table is now the same width as the body. Big deal, you say?
Actually, it is a big deal. Because the body and table are the same width, it means I can apply the max-width to the body instead of the table. This in fact gets around all those nasty centering issues you are going to have doing it any other way.
So think of it this way…..I have told the table to go to the full width of the body. I then told the body it was to go no wider than 1000px. Even if you don’t understand why this works, just trust that it does!
Last part to add to the stylesheet
One more thing we need to do in the stylesheet. As we have created the class above, called main-table, we need to create some properties for any other tables we might use on the page. This isnt essential, it’s merely to ensure they will format the way you want them. So here is a basic one that you can adjust to suit yourself.
table {
font-family: ‘Trebuchet MS’, Arial, Verdana, sans-serif;
font-size: 100%;
color: #000;
padding-top: 2px;
padding-right: 2px;
padding-bottom: 2px;
padding-left: 2px;
}
If we didnt add this, then any other table we might add to the page would take on the properties of the class above. Things like auto width for example.
Making the changes to your HTML page
Okay, nearly there. All we have to do now is add in the class to our page.Here is a simple page, utelizing this way of limiting the width.
<html><link rel=”stylesheet” type=”text/css” href=”yourstylesheet.css”>
<body> <div class=”main-table”align=”center”>
<table width=”90%><tr><td>
content goes in here</tr></td><table></div>
(please don’t leave a comment to tell me that the align attribute is deprecated for tables! I know that….just keeping it simple)
How will all that work?
The main content table will expand to 900px, no further. The max-width and the javascript expression ensures that. If your monitor is say 1024×768px then anything above 900px in width will just fill in with whatever color/background image has been used for the body.
The content table will be centered at all times, and you will have a web page that knows when to stop expanding.
Get the PDF
I have a free report on one of my websites, that explains exactly how this works, and how to apply it to your own site. Please feel free to download it, and try it out for yourself.
Happy designing!
How soon will you update your blog? I’m interested in reading some more information on this issue.
I only have limited time at the moment, so posts are a bit erratic. But this is a subject I have a strong interest in, so there WILL be further posts on this.
I have a full css template that I’ve developed, that also uses the max width principle. Im considering making it available as a download shortly.
Your PDF link is broken. You have an extra HTTP in there.
It needs to go to:
http://www.easy-online-money.net/ebooks/Fluid-Design-Secrets.pdf
thanks for pointing out the broken link. I have now fixed that.
Cheers, AJ
These really helped me to build my homepage, I can really appreciated if people take some time and write a usefull tutorial.
I studied the css tutorial and I really learned a lot. I think my next homepage will be a lot better than my first one.
Thanks for sharing. I am a massive WP fan and it just goes to show the power that this platform is capable of.Now I just wish I was a programmer so I could write some amazing plugins for myself!