CSS Liquid Layout Design

CSS Liquid Layouts are used to create clean CSS designs that are expandable depending on the size of browser. Mainly it bases on the dimensions of the containers like columns, header, footer and content areas. Try to narrow and expand the width of browser, you might see the liquid layouts are flexible and different with normal layouts. Below i selected a list of websites that have succeeded at liquid design.

http://outlog.fb07.de/

http://visualnotion.com/v4/

http://shockenterprise.net/

http://www.chriswilliamsdesign.com/

http://www.tim-adler.com/

http://2xup.org/

http://overture21.com/

http://www.stuffandnonsense.co.uk/

http://clearleft.com/

Related resources…

1. Liquid layouts the easy way - a base tutorial by Maxdesign.
2. Create a simple liquid layout - tutorial about how to make a simple but effective liquid layout.
3. Liquid Image - how to create liquid image that the size changes too when the containing column size changes.
4. Liquid round corners - a technique for creating dynamically changing not rectangular borders.
5. CSSLiquid - useful resources for liquid layouts in CSS based design.
6. How to Create CSS Liquid Layouts - a comprehensive tutorial on CSS liquid design by Nikki Freeman.
7. Creating Liquid Layouts with Negative Margins - by Ryan Brill @ AListAPart.
8. Book: Web Standards Creativity: Innovations in Web Design with XHTML, CSS, and DOM Scripting