Going fluid elastic

Posted on 29 June 2008 by Clive Walker in CSS Web Design

I wrote this post a while back. The content can still be relevant but the information I've linked to may not be available.

I know that I tend to stick with fixed width layouts for many website projects and I prefer this type of layout over fluid layouts. See Fixed or fluid layouts. I know, I know. Fluid layouts use up the screen space better. They resize to fit the browser window. And all that.

Despite their advantages, fluid layouts also have some disadvantages and I have never felt completely comfortable with fluid (aka liquid) layouts. So, over the last few months I have been assessing other types of layout. Perhaps a layout with the advantages of a fixed width but the ability to become fluid at some screen widths? And perhaps with built-in layout elasticity for user text resizing?

Before you say that’s impossible, check out this article about fluid elastic layouts on Boagworld. It’s a great article and it explains a relatively simple technique for achieving a layout that is fluid at smaller screen resolutions or smaller window widths but elastic at larger widths/resolutions. This is a hybrid layout. Whilst this is not a new idea, the article explains it very well.

Feeling inspired, over the last few days I have been converting a fixed width website to a fluid elastic layout. I must say, the hybrid layout seems to work really well. At the same time, I have used this as an ‘excuse’ to redesign things as well; something that has been needed for a while (ahem). The new layout and design is not quite ready for publication yet but I hope to get it finished real soon.

It’s great to try out something new!