Blogging Tips

Fluid Width Site Tips

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.

#wrapper {
    min-width: 740px;
    max-width: 1200px;
}

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.

#header {
	height: 100px;
	background: url(image.jpg) no-repeat 0 0;
}

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:

#contentwrap {
	position: relative;
	margin-left: 185px;
}
#sidebar {
	width: 175px;
	margin: 0 10px 0 -185px;
	float: left;
}
#content {
	width: 100%;
	float: left;
}

The markup for this would be

<div id="pagewrap">
	<div id="header"></div>
	<div id="contentwrap">
		<div id="sidebar">Menu</div>
		<div id="content">Content</div>
	</div>
</div>

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.

Written by Sarah from Stuff By Sarah
Posted on April 16th, 2009 and filed under Design & Coding
Do not forget to subscribe to our RSS feed for updates

8 Responses to “Fluid Width Site Tips”

Author comments are in a darker gray color for you to easily identify the posts author in the comments

Angelica says:

April 16, 2009 at 5:55 pm

Well, unfortunately some browers do not support max and min width properties.
Sarah says:

April 17, 2009 at 3:41 am

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).
José says:

April 17, 2009 at 8:22 am

Nice work!
Video library software says:

April 17, 2009 at 10:48 am

An important tip is displaying the most important information within the view of a user, so that it is not neccessary to scroll down
sba says:

April 17, 2009 at 9:50 pm

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?
Sarah says:

April 18, 2009 at 5:12 am

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.

Trackbacks

Using Conditional Comments says:

April 23, 2009 at 3:00 pm

[...] we can put this into practise by revisiting last week’s post about fluid widths. The code given in the post will work for IE7+ but it won’t work in IE6 and below. So after [...]
Tips for Creating a Fluid Width Site :: Stuff by Sarah says:

April 23, 2009 at 4:02 pm

[...] the full post at Fluid Width Site Tips on [...]