Content Area

Two Columns Fluid (Liquid) CSS/Table/Div Page Layout

This page layout has two columns like Two Columns Fixed Page Layout but fluid layout is adaptable to visitor's screen size. Fluid page layout is also known as liquid page layout. In this example, fluid page layout width is always 100% of the browser window size. Navigation area has fixed size, and Header, Footer and Content area resize when you resize browser window. On this way, page looks nice on different visitors' screens. You can test it now if you change the size of your web browser window.

Fluid page layout advantage over fixed page layout is that you can avoid horizontal scroll bar on smaller screen resolutions. On other side, if visitor's screen is very large, text on page could be hard to read. You can limit the size of layout areas by using max-width parameter (or min-width to set minimum size) in CSS, but it is not supported by every browser.

This is hybrid layout, mix of Div layout and Table layout. There are many discussions on Internet which page layout is better: DIV layout or TABLE layout. This example is hybrid layout that uses DIVs for Header and Footer areas, and TABLE tag for columns, Navigation and Content area.

Two Columns Fluid (Liquid) Page Layout uses CSS to define appearance of both DIVs and TABLE tags. By using CSS, page size is smaller and easier to maintenance because we only need to change .css file to change complete site. In combination with Master Pages, CSS files could make changing of web site very fast and effective. Also, pages load faster and require less bandwidth.

If you prefer three columns page layout check Three Columns Fluid (Liquid) Page Layout, or select one of the page layouts from Navigation area on the left side.