XHTML CSS Three Column Top Layer Layout

About this Web Template:

Three columns is something of the holy grail of CSS Web layouts and this layout modifies that design with a top layer for branding or navigation.

Special Notes:

This layout uses the box model hack to insure that IE and Mozilla display these pages the same.

Details:

• top row is 100px tall with a black 1px border
• left and right columns are 200px wide and positioned absolutely
• the middle column is positioned with margins so it flexes with the browser width

See The Template

To Use the Free Web Template:

1. Copy the CSS into a document named main.css
2. Copy the HTML into a file in the same directory
3. Change the text to your content
4. Don't forget to add a title to the page
5. If you want to add design changes - create another CSS file or add it to main.css

The Web Site Template Data:

The XHTML
The CSS

Browser Support:

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

More Web Site Templates:

Free Web Site Templates
Free Menu Templates
Other 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.