Content Area

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

Fluid page layout (also called liquid page layout or relative page layout) changes its size depending of visitor screen resolution. Width of the page is specified in percents (unlike pixels used for fixed layout or ems used in elastic layout). Fluid (liquid) page layout is usually harder to create compared to fixed layout and requires more testing, but benefits justify more efforts.

This example is made as hybrid page layout. That means it is not pure CSS/DIV layout or classic table layout. Header and Footer areas are created using DIV tags. Two columns in the middle, Navigation and Content area use single TABLE tag. Every layout area is defined with CSS using external .css file. On this way maintenance is faster and easier since we need to change only one .css file to change whole site appearance. Also, page size is reduced to result in faster page loads and less bandwidth cost.

For search engine optimization (SEO) is important to have main content on the top of the HTML code. This example shows main content in the middle of the page, but in HTML code main content is placed before Navigation area to achieve better search engine ranking.

Two columns layout could be very effective. If two columns are not enough for you, check SEO Three Columns Fluid (Liquid) Page Layout). Also, you can check other types of page layouts listed in Navigation area.