Fluid width sites give the visitor control over how wide your site appears to them (within the limits set) and allows you to make more use of larger screen resolutions. A fixed width site designed to fit for an 800px wide resolution looks very thin on a 1600px wide resolution. A fluid width allows you to specify a minimum and maximum width to display the site in, so that you can prevent the site going too thin and breaking and also make use of larger screen resolutions up to a top limit.
A Fluid Width
To create our fluid width, we need to use a wrapper div to contain the site in, similar to standard fixed width site. Then instead of specifying a width in the CSS, we specify the min and max widths i.e.
[sourcecode language="css"]#wrapper {
min-width: 740px;
max-width: 1200px;
}[/sourcecode]
This will give us a site that will appear full width in about 75% of the screen resolutions used.
Fluid Width Banners
If you’ve got a banner, either a graphic or photo, then a fluid width may not seem like an option to you, however, providing you can ensure the banner is big enough for the widest version of your site, then with a bit of CSS you can have the banner showing and fit to whichever width site is in use. To do this we set the banner as the background to a div (which it should be if it’s simply a design feature) and give the div the correct height to show the banner i.e.
[sourcecode language="css"]#header {
height: 100px;
background: url(image.jpg) no-repeat 0 0;
}[/sourcecode]
Fixed Sidebar, Fluid Site
Finally, to keep a fixed width sidebar but allow the content to fill up the rest of the area, we need to use a bit of CSS trickery to do the job. We wrap the sidebar and content divs in another wrapper, and then use that to control things. The code below will allow you to achieve this:
[sourcecode language="css"]#contentwrap {
position: relative;
margin-left: 185px;
}
#sidebar {
width: 175px;
margin: 0 10px 0 -185px;
float: left;
}
#content {
width: 100%;
float: left;
}[/sourcecode]
The markup for this would be
[sourcecode language="html"]
[/sourcecode]
These are just a few tips on how to achieve a fluid width site. It may seem more complicated but it does create a more user friendly site and gives the control back to the visitors.
Well, unfortunately some browers do not support max and min width properties.
Hi Angelica, the min and max width properties work in all modern browsers – IE7+, Firefox, Opera, Safari/Chrome.
For IE6 and below the site would just go full width, however, there is another method which would need to go into a separate IE6 and below stylesheet, something I'll be covering next week (conditional comments that is).
Nice work!
An important tip is displaying the most important information within the view of a user, so that it is not neccessary to scroll down
I like these tips which you explained quite well — especially the sidebar aspects. One point you may want to address is readability. For very wide screens, how hard is it for someone to read text across a wide area, say more than 100 characters? Isn't there an optimal bite size for the length of a line? We're sort of trained on magazine columns or book page size. Or does the user control this by shrinking the window size?
The beauty of a fluid or full width site is that you give the control back to the user and allow them to resize their own browser to make the site the width they need. However, this is why you still add in a max width as yes, content can stretch a bit too much and become unreadable. 1200 max width, which includes a sidebar (so the content area is probably around 1000px wide roughly) is a good target to aim for but your user will be able to reduce it down further if they feel the need to.