Content Area

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

This page layout contains Header area on the top of the page, Footer area on the bottom, and three column areas in the middle: Navigation, Content and Advertisement area. Header and Footer areas use DIV tags, and columns use single TABLE tag. All five areas appearance is defined with CSS using single external .css file.

This page layout is also search engine optimized (SEO friendly). There are many factors that affects page ranking, and most of them don't depend of page layout. But, some factors, like position of main content in HTML code are notable. Search engines prefer pages where main content is near the top of the page. To achieve that, this page layout example shows main content in the middle of the page (that is user friendly), but puts main content before navigation in HTML code (that is search engines friendly).

This example is fluid layout (also known as liquid or relative layout). Fluid layouts use percent to define the size of page elements. Because of that, page is adaptable to different screen resolutions. That is opposite to fixed page layout where page elements have fixed size, defined in pixels. Fluid layouts are usually harder to create than fixed layouts because everything is changeable. To make things simpler, this example display Navigation and Advertisement areas as fixed and only Content area changes depending of screen size.

Example uses external .css file to define appearance of page elements. If you want all three columns to be changeable, just change width of the Navigation and Advertisement areas from pixels to percents. Just be sure that grand total to be equal to 100%.

If fluid page layout looks to difficult take a look at SEO Three Columns Fixed Page Layout which remains same on every screen resolution. Also, you can check other options listed in Navigation area on the left side.