Liquid Layouts

This blog explains one method of achieving a successful liquid layout as well as providing basic definitions of liquid, fixed-width and em-driven layouts.

Some definitions

Liquid layout

All containers on the page have their widths defined in percent’s – meaning that they are completely based on the viewport rather than the initial containing block. A liquid layout will move in and out when you resize your browser window.

Combination liquid and fixed layouts

Similar to liquid layouts, except one or more of the containers on the page have fixed widths.

Fixed-width layouts

All containers on the page have their widths defined in pixels or other fixed units. They are completely independent of the viewport. A fixed layout will not move in and out when you resize your browser window.

Em-driven layouts

All containers on the page have their widths defined in ems. They will be scaled according to the users default browser font size. They are completely independent of the viewport.

You can also use combinations of the above.