Liquid layout - challenges the brain cells

[kc005]

Well you either love them or hate them - I think I dislike. Having fought for a while on code to make header navigation stay as it should when the browser window is made smaller - I did find that setting the min-width:600px helped. I would appreciate any other good links or advice on your problem solving for liquid. I had never previously tried to do liquid - it is tough challenge as stuff breaks alot.

I note many liquid layouts do not use header graphics in a traditional way but they use repeating slivers which helps in the resizing mess when you stretch the browser out.

I think a masterful example of doing it well is liquid layout blog http://veerle.duoh.com/
(http://veerle.duoh.com/)

[tomjeatt]

I have to say I hate liquid layouts, and I would need a lot of persuading to even try one. I can't really think of a situation where a well designed fixed width layout and some carefully targeted style sheets wouldn't present a preferable solution. That said I'm probably inviting someone to shoot me down by making such a broad statement!

There's a very interesting article on CSS3 media queries and Responsive Web Design (http://www.alistapart.com/articles/responsive-web-design/) on A List Apart. Media queries are one of the things I'm most excited about in CSS3.

[tomjeatt]

After I posted that last message I realised I didn't actually say anything helpful about liquid layouts but I was thinking it through a bit later and I remembered an article by Matthew Levine on A List Apart called In Search of The Holy Grail (http://www.alistapart.com/articles/holygrail/). He discusses his approach to creating liquid layouts which is based on really solid code with minimal markup. The term really caught on as well so googling 'Holy Grail CSS' (or similar) should bring you to some really helpful discussions and examples. It was quite a while ago now (and I'd completely forgotten about it until his example page jogged my memory!), but I spent a while playing about with the idea and it works really well.

While I was looking for that I also came across an article called Ultimate multi-column liquid layouts (http://matthewjamestaylor.com/blog/ultimate-multi-column-liquid-layouts-em-and-pixel-widths) by someone called Matthew James Taylor. I'm not that convinced by his code as it all seems a little div-heavy to me, especially when you compare the code for his three column layout to Matthew Levine's! Having said that he's obviously spent a lot of time developing the code (as well as ironing out cross browser-wrinkles and testing across multiple platforms) so it's probably worth a look to see what he's done.

[kc005]

Hi Tom - nice one - I actually used Taylor approach for two of my styles for homework- having reread a few times I understood how he had achieved a really quite solid solution. Without some help here I think my attempt would have broken in other browsers etc (pointless reinventing the wheel) but I had lots of problems along the way so I am defo not a fan. I adapted his work later to form a fixed width 3 column which had a clever method to solve the background colour not filling the shorter column of a 2/3 column layout. Liquid is not my first choice but glad I tackled it.

[David]

I have to say I hate liquid layouts, and I would need a lot of persuading to even try one. I can't really think of a situation where a well designed fixed width layout and some carefully targeted style sheets wouldn't present a preferable solution. That said I'm probably inviting someone to shoot me down by making such a broad statement!

I'm not intending to soot you down...:)

What's interesting in all of this is the speed with which ideas in web design change. Liquid layouts became a holy grail of page layout around 4-5 years ago. In my opinion, there were 2 reasons for this. The first is that is was (and still is) considered good design practice to allow the user as much flexibility over web pages as possible. The argument goes that if a user has a high resolution 24" monitor, why should they be restricted to a fixed width column designed for a 800px wide monitor; they should be allowed to resize their browser window and have the web page adapt. This is the logic I used when designing the current version of the CADTutor website ( I used the Skidoo Too (http://webhost.bridgew.edu/etribou/layouts/skidoo_too/index.html) technique - similar to the Taylor soution). As I have mentioned in class, this approach resulted in highly complex markup and lots of divs whose only purpose was to contain other divs. But at the time the user requirement outweighed the difficulties (we should always design for the user). The other reason is the classic "macho" issue - liquid layouts are difficult (especially multi-column) and are therefore a challenge. One can demonstrate ones prowess by implementing such a design.

Recently, a more pragmatic approach has emerged and once again there are 2 key issues. There is a growing acceptance that CSS 2.1 is an imperfect tool and was never designed to facilitate complex page layouts - so why spend time trying to produce a perfect result with an imperfect tool? Secondly, it has become clear from a usability point of view that most people do not maximise their browser to fill the whole width of a high resolution monitor. If they do, lines of text become so long that they are difficult to read etc. This begs the question, "is it better (in usability terms) to contain text in an optimally sized column or to let the user decide?" There are proponents of both sides.

On balance, I think liquid layouts should be considered if there is a compelling reason (usability, accessibility etc.) but that pragmatism dictates that our default should be for fixed width layouts.

With CSS3 comes the promise of text flow from one column to the next and the issue is likely to be revisited, but until then, we have to work within the reasonable limits of the technologies we have at our disposal. That's not to say you should never attempt such a thing - anyone who has will gain a much better understanding of CSS than they had before.