Header
Navigation Area

Page Layouts Home

Select Page Layout

Two Columns Fixed
Three Columns Fixed
SEO Two Columns Fixed
SEO Three Columns Fixed
Two Columns Fluid (Liquid)
Three Columns Fluid (Liquid)
SEO Two Columns Fluid (Liquid)
SEO Three Columns Fluid (Liquid)
Two Columns Elastic
Three Columns Elastic
SEO Two Columns Elastic
SEO Three Columns Elastic

Content Area

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

Fluid page layout (also known as liquid page layout) defines size of layouts areas in percent units [ % ]. Width of the page elements (e.g. Header area) depends of the size of the visitor's screen. On this way, if designed well, fluid page layout can be very adaptable for different screen resolutions. You check it now: if you change your web browser window size, complete page resize.

The problem with fluid page layout is that it is usually harder to create fluid layout than fixed page layout. To make things simpler, this example keep width of Navigation area on the left side and Advertisement area on the right side fixed. Header, Footer and Content area in the middle are changeable. On this way, you can place some amazing graphic on page and still have liquid layout. Of course, you have an option to set widths of all three columns (Navigation, Content and Advertisement) in percent. If you do this, all three columns will change its size depending of window size.

This page layout uses both DIVs and TABLE tags. There are many discussions on Internet about which page layout is better: DIV layout with CSS or classic table layout. Both types have their own Pros and Cons. This page layout example is hybrid solution that uses DIVs for header and footer areas and TABLE tag for columns (Navigation, Content and Advertisement). On this way it takes best from both worlds. It uses external .css file to define appearance of all layout areas. The advantage of using CSS is smaller page size and easier maintenance.

If fluid page layout doesn't looks satiable for your site requirements, check Three Columns Fixed Page Layout or select appropriate page layout from Navigation area on left side.

Advertisement