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.
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
- 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
- Copy the HTML into a document on your Web server
- Copy the CSS into a document named styles.css and place it in the same folder
- Download the background image and place it in the same folder on your server
- Change the text to your content
- Publish the Web page and graphics file
- The XHTML
- The CSS
- The Background Graphic (right click to download)
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.
