Fluid vs Set Content Pains

jleask — Tue, 07 Aug 2007 16:37:53 GMT

Yes, the pun is intended ...

If you ever do front-end design work you have likely started to dabble in Cascading Style Sheets (CSS) - and if you haven't, you better start!

One limitation I've noticed over the years is how to have a set-width left panel (i.e., menu panel) and a fluid width right panel (i.e., content). It's virtually impossible to do this without some form of JavaScript (in fact this is how I've always done it in the past). Problem is once you get into CSS many people become purists very quick and using JS for this kind of a problem becomes something that makes even the newest CSS developer grumble.

I recently found a solution thanks to my subscription to A List Apart (if you are a front-end n00b or experienced CSS dev, I highly suggest you put their feed in your news reader). Thanks to Rob Swan, who took the time to realize that DIVs are more flexible than we originally thought, we now have a fully CSS solution that works cross-browser (with a minor IE 5/6 only hack that still remains CSS pure).

The solution? Turns out you can set the TOP/BOTTOM LEFT/RIGHT all at once. I, like Rob, had always assumed if you set a TOP the browser would ignore the BOTTOM and likewise on the LEFT/RIGHT. Turns out everything but IE 5 & 6 ignore that. However, his IE only solution is almost as simple as the cross-browser solution.

Check out Rob's article Conflicting Absolute Positions where he gives a very detailed explination on how to solve the issue including code samples. Thanks Rob!

So - how have you been fighting the battle between left and right content panes?

Digital Serenity : CSS, Code

Fluid vs Set Content Pains