1. Computing & Technology

Discuss in my forum

Free Web Template: Two Column with Top Branding Layer Template

The XHTML

By , About.com Guide

Copy the XHTML into your document. Be sure to not copy the advertisement copy that may appear within the code.

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml" lang="en">
 <head>
 <title></title>
 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
 <link href="styles.css" rel="stylesheet" type="text/css">
 </head>
 <body>
 <div id="top">
 <h1>Branding</h1>
 <p>Typically, the top bar area would be for your company logo and possibly
 global navigation. </p>
 </div>
 <div id="left"><h1>Sidebar</h1>
 <ul>
 <li><a href="http://webdesign.about.com/library/layouts/bl_centeredcolumn.htm">Home</a></li>
 <li><a href="http://webdesign.about.com/library/layouts/bl_layouts.htm">XHTML CSS Layout Templates</a></li>
 <li><a href="http://webdesign.about.com/library/weekly/aa102102a.htm">Tableless Browsing</a></li>
 <li><a href="http://webdesign.about.com/cs/css/">CSS Links</a></li>
 </ul>
 </div>
 <div id="main">
 <h1>Sample Content</h1>
 <p>
 Place your main content here. 
 </p>
 <ul>
 <li><a href="http://webdesign.about.com/library/layouts/bl_centeredcolumn.htm">Home</a></li>
 <li><a href="http://webdesign.about.com/library/layouts/bl_layouts.htm">XHTML CSS Layout Templates</a></li>
 <li><a href="http://webdesign.about.com/library/weekly/aa102102a.htm">Tableless Browsing</a></li>
 <li><a href="http://webdesign.about.com/cs/css/">CSS Links</a></li>
 </ul>
 <p>
 Lorem ipsum sit dolor amum. Lorem ipsum sit dolor amum. Lorem ipsum sit dolor amum. 
 Lorem ipsum sit dolor amum. Lorem ipsum sit dolor amum. Lorem ipsum sit dolor amum. 
 Lorem ipsum sit dolor amum. Lorem ipsum sit dolor amum. Lorem ipsum sit dolor amum. 
 Lorem ipsum sit dolor amum. Lorem ipsum sit dolor amum. 
 </p>
 <h2>Lorem Ipsum</h2>
 <p>
 Lorem ipsum sit dolor amum. Lorem ipsum sit dolor amum. Lorem ipsum sit dolor amum. 
 Lorem ipsum sit dolor amum. Lorem ipsum sit dolor amum. Lorem ipsum sit dolor amum. 
 Lorem ipsum sit dolor amum. Lorem ipsum sit dolor amum. Lorem ipsum sit dolor amum. 
 </p>
 <p>
 Lorem ipsum sit dolor amum. Lorem ipsum sit dolor amum. Lorem ipsum sit dolor amum. 
 Lorem ipsum sit dolor amum. Lorem ipsum sit dolor amum. Lorem ipsum sit dolor amum. 
 Lorem ipsum sit dolor amum. Lorem ipsum sit dolor amum. Lorem ipsum sit dolor amum. 
 </p>
 </div>
 </body>
 </html> 

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.

Return to Two Column with Top Row Layout
More XHTML CSS Layout Templates

©2012 About.com. All rights reserved.

A part of The New York Times Company.