CSS/Table/DIV Page Layouts Examples

There are many debates over Internet about which layout is better: Table layout or CSS layout. Both sides have their arguments why one option is better than other. This list contains hybrid CSS/Table/DIV example page layouts which takes best from both worlds.

Full comparation of table layout and CSS layout you can read in DIV/TABLE/CSS Page Layout tutorial.

Two Columns Fixed Page Layout

Two columns fixed page layout is one of the simplest layouts used on Internet. Still, it could be very effective. This example layout contains header on top, footer on the bottom and two columns: Navigation and Content areas in the middle.

Three Columns Fixed Page Layout

Three columns layout is one of the most popular on Internet. This example is so called fixed layout. Fixed layout means that page looks same on every screen resolution. If user has larger screen page will remain same with white spaces on the left and right side. If visitor has smaller screen horizontal scroll bar will appear which is generally unacceptable. To satisfy most visitors, today sites with fixed layout are usually optimized for 1024x768 screen resolution.

SEO Two Columns Fixed Page Layout

One of the factors that affect page ranking on search engines is position of the main content in page HTML code. This layout place main content area in the middle of the screen, but before navigation area in HTML. On this way pages could benefit higher position in search results.

SEO Three Columns Fixed Page Layout

Similar as last example, SEO three columns fixed page layout has middle column with main content placed before navigation area (left column) in HTML code. This example has additional right column which is useful for some call to action or advertisement.

Two Columns Fluid (Liquid) Page Layout

Fluid layout is adaptable to visitor screen size. Instead of using of pixel units to define layout areas, fluid layout uses percent units. Fluid layout is also known as liquid page layout or relative page layout. In this example, fluid layout will change its size if you change size of the web browser window.

Three Columns Fluid (Liquid) Page Layout

Three columns fluid (liquid) page layout has header, footer and three columns in the middle: Navigation, Content and Advertisement area. Fluid page layouts are usually harder to create than fixed page layouts because fluid layout looks differently on every screen resolution. To make this task easier, this example layout keep left and right columns fixed and only content area is adaptable.

SEO Two Columns Fluid (Liquid) Page Layout

To get better page ranking on search engines, this page layout has main Content area placed before left column (Navigation) in HTML code. On screen, content is still displayed in the center of the page. This page layout has two columns (Navigation and Content), Header on top, and footer area on the bottom of the page.

SEO Three Columns Fluid (Liquid) Page Layout

SEO three columns fluid (liquid) page layout has additional column on the right side. As every other layout in this list, it uses external .css file to define appearance of page elements. Benefits of using CSS are easier maintenance, smaller page size, faster page loads and reduced bandwidth costs.

Two Columns Elastic Page Layout

Elastic page layout uses em units to define the size of page elements. If visitor change font size in browser, complete page is resized. This could be very cool, but elastic layout is usually harder to create than fixed or fluid page layout.

Three Columns Elastic Page Layout

Three columns elastic page layout contains header, footer and three columns in the middle. All five areas could resize to provide better user experience. You can test it if you go View -< Text Size in IE or View -< Zoom in Firefox and change default values.

SEO Two Columns Elastic Page Layout

Like other SEO page layouts, this layout has main content closer to top of the HTML code. This increases page ranking and gets more visits to web site. At the same time, page is changeable and can enlarge or shrink depending of user settings.

SEO Three Columns Elastic Page Layout

SEO three columns elastic page layout has header area on the top of the page, three columns in the middle and footer area on the bottom of the page. DIV tags are used for header and footer areas. Three columns in the middle are created with single TABLE tag. Appearance of all five areas is defined with external .css file. This layout is elastic that means that it resizes when visitor increase or decrease text size. It is also optimized for search engines (SEO friendly) because main content is placed near the top of the HTML code.