1. Home
  2. Computing & Technology
  3. Web Design / HTML

Two Column Layout Templates
Simple Web Templates for 2-Column Web Pages

By , About.com Guide

When you want to build a Web page, the easiest way is with a free Web template. These free 2-column templates will help get you started.

  • 2-Column Centered Flexible Width Layout Template
    XHTML 1.0 Strict Doctype; SEO Ready
    A very common layout you find on the Web is a 2-column centered layout that flexes to match the current window width. This layout validates as XHTML 1.0 Strict, uses h1 and h2 tags for headlines and the main content area comes first on the page.
  • Fifty-Fifty Website Template
    This is a two column layout with an optional footer. It is built as a flexible width template with two columns, one with a colored background and one not. It is built so that browsers that support the max-width property will not expand the page too wide to read.
  • Overlapping Sections in a Two Column Layout
    A two column layout where the columns overlap the headline.
  • Two Columns with Header and Footer
    Adding a header and footer to a two column layout is fairly easy.
  • Two Column Stretches to Fit Layout
    This is really a four column layout that stretches the three columns on the right to either stack or fit depending upon the browser width.
  • Two Column Faux Column Layout
    A two column layout with faux columns that stretch the height of the page, no matter how tall the content is in either column.
  • Left Navigation Top Header with Photo and Colors
    This layout takes it's look and feel from a photo of an iris from my garden. The layout can be used for a photo page, or an ecommerce site product detail page, or just with a decorative photo as my example displays.
  • Floating Navigation Box
    When you don't have a lot of navigation links, sometimes all you need is a box at the top of yourpages with the navigation in there. This box floats to the right or left and the text in the main area flows around it.
  • Two Column with Top Branding Layer
    This layout adds to the basic two column layout by adding a top row for branding and global navigation information.
  • Two Column Layout
    This is a very basic layout, with two columns. The left is fixed width and the right is the rest of the window space.
Explore Web Design / HTML
About.com Special Features

Holiday Central

What to eat, where to go, fun things to do and how to save money on the perfect gifts. More >

Family Tech Center

Stay connected and entertained with reviews on tips on the latest HDTVs, cellphones and more. More >

  1. Home
  2. Computing & Technology
  3. Web Design / HTML
  4. Web Design
  5. Principles of Web Design
  6. Layout
  7. Web Site Templates
  8. Two Column Layout Templates - Simple Web Templates for 2-Column Web Pages >

©2009 About.com, a part of The New York Times Company.

All rights reserved.