Content Area

Three Columns Elastic CSS/Table/Div Page Layout

Three columns page layout with header on the top and the footer area on the bottom of the page is probably most popular page layout on Internet. This implementation is so called "elastic". Elastic page layout uses em (instead of pixels or percent) to specify width of page elements. If em units are used, page is more accessible. You can see how it looks on this example:
- If you use Internet Explorer, go to View -> Text Size and select change current value (default value is Medium)
- If you use Firefox web browser, go to View -> Zoom, and select either Zoom In or Zoom Out option.

As you see, when you increase or decrease text size, whole page layout changes. This can be very visitor friendly. But, elastic page layouts are usually harder to implement than fluid layout and fixed page layout.

However, I must say that most people don't change default text size in their browsers, so there is actually no benefits of this layout for most visitors. If you consider that this layout is usually harder to implement and takes more time, there is a question are benefits (cool design and usability) enough to justify time invested.

Search engine optimization (SEO) is more and more important. There are hundreds of factors that affect ranking of web page, most important are incoming links, file name, page title and using of H1 tag etc. Page layouts can affect few SEO factors. This layout example uses external .css file to define appearance of layout elements. On this way pages have smaller size and load faster. This is good not only for visitors, but also search engines give higher rankings to faster sites. Second SEO factor is position of main content in HTML code. It is better if main content is near to top of the page HTML.

This page layout example uses simple table to define column areas (Navigation, Content and Advertisement). See SEO Three Columns Elastic Page Layout to find out how you can place main content on the beginning of the HTML and still display it in the middle of the page. Also, you can check other page layouts by using links in Navigation area on the left side.