Development Diary: 4 Tips on Working With Fluid Layouts

Recently at my daily job I had the opportunity to work on a 100% fluid layout for a project management web application. During the process of cutting it up in XHTML and CSS, I learned a lot and definitely had a lot of fun moments while making it backwards-compatible with IE6. This article is a collection of insightful ideas and those moments I collected through the development of the project.

1. Reset it!

I can’t stress this enough, reset your styles to a default, so all those browsers will behave as closely between them as possible. This may actually save you some months of your precious life. I already mentioned this in another article.

2. Transform those em values!

Set up the base font-size to 62.5%. This will scale em values into a pixels-friendly relationship, where one em unit will equal 10 pixels. While not necessary for building em-based layouts, it helps a lot translating your pixel-based photoshop design into css values.

body {
	font-size: 62.5%;
}

One thing to be careful, though. If you change the font-size with a relative unit somewhere down the structure of your site — for example to 80% — all it’s children will be sized to 80% of 62.5%, which might not be what you want if you depend on the 1em = 10px rule. My recommendation for you, is to set the text size as close to the bottom of the nesting structure as possible, right at the point where you need it.

3. Min Max it!

Limit your main containing div’s (or body’s) min-/max-width to a comforting value in ems. If you set up the maximum width in another unit, you will pretty soon get horizontal scrollbars to display, which you - the conscious designer - hate with the bottom of your heart. While setting min-width is optional, you don’t want the design to grow too large with people on small monitors/resolutions, thus setting max-width in em units is a good idea.

Unsurprisingly this doesn’t work on IE6 and below, so you’ll have to use an expression — or dynamic property if you will — to set the min-width and max-width values:

#container {
	/* set min-width for ie6 */
	width: expression(document.body.clientWidth < 742 ? "740px" : "auto" );
}

#container {
	/* set max-width for ie6 */
	width:expression(document.body.clientWidth > 1202 ? "1200px" : "auto");
}

#container {
	/* set both min-width and max-width for ie6 in one declaration*/
	width: expression(document.body.clientWidth < 742 ? "740px" : document.body.clientWidth > 1202 ? "1200px" : "auto");
}

4. Percent your columns carefully!

Set up your sidebar(s) and content columns in percents, like 25% for the sidebar and 75% for the content. You can also max-width your sidebar in ems (or pixels in some cases) to keep it getting too wide on large monitors. You may want to add padding to your columns in percents, but if variable paddings — as you resize text — bother you, you may want to add an extra div inside the main column divs, and add padding in ems to that one. This will keep the paddings behaving gently on your cherished design.

There you have it, four tips to get you going nicely with variable-width layouts. Hope you like it and thanks for reading!

This entry was posted on Wednesday, March 12th, 2008 at 9:57 am. You can follow any comments through the RSS feed. Both comments and pings are currently closed.