Header
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

Content Area

Two Columns Elastic CSS/Table/Div Page Layout

Elastic page layout uses em units to define the size of the layout areas or fonts. On this way, if visitor increase font size in browser, complete page enlarge. You can try it now,
- If you use Internet Explorer, go to View -> Text Size and change default Medium value
- If you use Firefox browser, go to View -> Zoom and choose either Zoom In or Zoom Out option (don't forget to return to default values after testing)

Elastic page layout can be very user friendly. But, it is harder to create and usually takes a lot of testing. Don't forget to check how it looks on smaller screen resolutions. Two Columns Fixed Page Layout or even Two Columns Fluid (Liquid) Page Layout are usually much more easier to implement.

This page layout example uses DIV tags for header and footer area and TABLE tag for navigation and content area. Both DIV and TABLE tags are controlled by external .css file, which makes maintenance easier and reduce page file size. On this way bandwidth costs decrease and pages loads faster enabling better user experience.

If two columns in elastic page layout are not enough for you, check Three Columns Elastic Page Layout or select some other layout from left menu.