Content Area

SEO Three Columns Elastic CSS/Table/Div Page Layout

If you want your page optimized for search engines, then your content area should be near the top of HTML of page. In this example, Content area is first in HTML, second is Navigation area and last is Advertisement area.

Header area usually doesn't have much content so it is leaved first in this layout. If you want Content area before header, you can achieve that with absolute positioning.

Elastic page layout uses em as a unit to specify the size of elements. The advantage of elastic page layout is that it adapt if you change the size of text. Try it now: if you use Internet Explorer go on menu View -> TextSize and change default medium value. If you use Firefox, go to View -> Zoom and select Zoom In or Zoom Out option.

Elastic page layout can be more accessible for visitors with disabilities, but keep in mind that zooming will not work if size is specified in pixels.

In this example, DIV tags are used for header and footer area. Three columns in the middle are created with TABLE tag. Both DIV and TABLE elements use external CSS file to define its appearance. This make files smaller, so we have faster page loads and reduced bandwidth costs.

To save this page layout:
- If you use Internet Explorer, go on menu File -> Save As... and save the page
- If you use Firefox, go to File -> Save Page As... to save the page to local disk