Flexible vs fixed

There’s been some talk about whether fixed or flexible width is best for web sites at Simon Willison’s Weblog and Asterisk*. Many seem to prefer fixed width.

For a long time I’ve preferred sites that use a fluid layout. I don’t know where I learned about this, but I’ll let you in on a secret: web browsers are resizable. You can actually change the width of your browser window! Cool, huh? If you have a huge monitor like I do, that means you don’t have to let your web browser cover the whole monitor. That’s where fluid (or liquid, or flexible - pick your favourite name for it) layout is great since it will adapt to the width of the browser window.

Well, as you probably have noticed, this site uses a fixed width layout. The reason is mostly technical. I’ve been looking for a way to make the layout semi-fluid. I wanted to keep the right column (sidebar) fixed width and make the left column (where the main content is) fluid up to some suitable maximum width. I also wanted to keep the order of the columns in the HTML source for accessibility and search engine reasons. Finally the footer should stay where it is, at the bottom. Obviously I haven’t found a good way to do this or I would have implemented it.

Floating the left column left and the right column right works if both are fixed (that’s how the current layout works) or fluid, but when one column is fluid and the other is fixed, setting the width for the fluid column becomes a problem. I need to define the width of the left column since I want it to precede the right column in the HTML source (to make the content more accessible and search engine friendly) and when floating something you need to define its width. And because the right column comes after the left column in the source, floating it right does nothing.

Adding a right margin to the left column and using position:absolute to position the right column works, but only if the left column is always taller than the right one. If the right column is taller it will cover part of the footer which obviously is no good.

I checked all the usual places and did some googling but found nothing that helped. I’m stuck here, so if anyone can come up with a (tableless) way of doing what I want (header + content area consisting of fluid left column and fixed right column with left column before right column in the source + footer), please let me know.

Posted on November 12, 2003 in CSS, Usability

Comments

  1. There’s a nice little trick that Svende Tofte has, using an extra “expression” property that allows you to insert Javascript into a stylesheet for IE. That pretty much covers the max-width hole.

Comments are disabled for this post (read why), but if you have spotted an error or have additional info that you think should be in this post, feel free to contact me.