Web Design / HTML

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

Two Column Layout Templates

Simple Web Templates for 2-Column Web Pages

By Jennifer Kyrnin, About.com

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

Build Your Own Website

Step-by-step advice on how to do everything from choosing a Web host to promoting your content. More >

Connect Your Home Computers

Easy ways to connect two computers for networking purposes. More >

Web Design / HTML

  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.