1. Computing

Discuss in my forum

Free Web Template: Two Column Faux Column Layout

By , About.com Guide

Two Column Faux Column Layout

Two Column Faux Column Layout

Jennifer Kyrnin

About this Web Template:

I got a request to explain how to build a multi column template with all the columns the same height, but without using the height property. Since that sounded like fun and I hadn't explained faux columns yet, I decided to build this page.

The background image was built in Photoshop CS.

See The Template

Works in Browsers:

Windows

  • Firefox and Mozilla 1
  • Internet Explorer 5 and 6
  • Opera 8.5 and 9

Macintosh

  • Firefox and Mozilla 1
  • Internet Explorer 5
  • Netscape 7
  • Safari 1

Details:

  • entire document ~800 pixels wide
  • first column 150 pixels wide, with a left margin of around 10 pixels
  • second column around 650 pixels wide
  • navigation done with a list

To Use the Free Web Template:

  1. Copy the HTML into a document on your Web server
  2. Copy the CSS into a document named styles.css and place it in the same folder
  3. Download the background image and place it in the same folder on your server
  4. Change the text to your content
  5. Publish the Web page and graphics file

The Web Site Template Data:

More Web Site Templates:

Terms of Use:

You are free to use any of the free Web templates here for personal or commercial designs, either in print or on the Web, excluding items for resale. You may not give away, sell, or redistribute the files in any way. Do not post these files on any another Web site, electronically distribute them, or include them in any package for distribution. If you find these files useful, please include a credit line or a link back to this site [http://webdesign.about.com/]. Terms of use last modified 8/29/2004.

©2013 About.com. All rights reserved.