Header

Content Area

SEO Three Columns Fixed CSS/Table/Div Page Layout

Three columns page layout with header on top and footer on the bottom is very popular page layout used by many web sites worldwide. This example layout uses two DIV tags for header and footer area and one TABLE tag for columns: Navigation area on the left, content area in the middle and Advertisement area on the right side. As opposite to pure CSS/DIV layout or classic table layout, this hybrid page layout tries to use best combination of both methods.

Every layout area is defined with external .css file. Benefits of using CSS are smaller page size, faster page loads, reduced bandwidth costs and easier maintenance since complete web site appearance can be changed in single CSS file.

This example is so called fixed page layout. Fixed page layout means that it remain the same look on every screen resolution. Because page always looks same, it is easier to create this layout compared to adaptable layouts like fluid or elastic page layout. If visitor has screen resolution larger than page width, he or she will simply see white spaces on the right and/or left side. Eventually, vertical scroll bar will be displayed if page is longer than screen height. This is acceptable and even expected for most visitors.

But, if visitor have screen smaller than page width, horizontal scroll bar appears. Horizontal scroll bar is unacceptable for most visitors and you should avoid it if possible. This example layout is optimized for 1024x768 screen resolution. This will satisfy more than a 98% of visitors. Before a few years, most sites were optimized for 800x600 resolution. Note that this recommendation doesn't include handheld devices which usually demand completely new page layout to display correctly on limited screens.

Except fixed layout, there is also SEO Three Columns Fluid (Liquid) Page Layout. This layout resizes depending of visitor screen size. Also, you can check other types of page layouts by using menu in Navigation area.

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

Advertisement