Fluid as in layouts that respond to user interaction’s, when a user resizes a window or changes it’s content the layout accompanies such actions. I’ve seen several sites with some sort of fluid layouts in contents and I really enjoyed seeing the pages adapating when one resizes the browser window, so, I did some searching on the subject and found some nice tutorials/examples of how it could be achieved.

I got some ideas from Menno, in a particular post where he addresses Web Development of Applications using CSS. He suggests two approaches to obtain flexible layouts.

  • method1_thumb.pngFirst approach you have one panel that uses all 100% space available from you browser, if you have two they have to split that amount in two (whether it’s equal or not depends on whatever you have in mind!), if you have tree or more panels you distribute the space for the amount of panels.

    You can check Menno examples using this approach here, here and a nested version here.

  • method2_thumb.pngOn the second approach he suggested that when you have multiple panels, only one should be extendible, all the other should its size fixed, for instance you’ll have tree columns, you defined a fixed size for the ones on the sides (left and right) and you allow the pannel in the middle to extend itself with the window. Menno also created a simple example using this second approach, you can check it here.

I personally prefer the first approach, simplicity rules, and the user can effectively distinguish what’s going on. One rather interesting example of fluid layouts comes by the hand of Cameron Adams, in one of his experiments he plays with some CSS and javascript to conceive a page that dynamically changes layout according to window sizes, see it working here (don’t forget to
resize the window!), and discover how you can go from this layout:

to this: