Copy the CSS into a file named styles.css and save it in the same directory as your HTML.
html, body { margin: 0; padding: 0; }
body { background: #cf9 url(aa082806bg.gif) repeat-y; }
#main { width: 600px; padding: 0px 25px 0px 15px; margin-left: 170px; }
#nav { width: 150px; margin-left: 10px; float: left; }
#nav ul { margin: 0; padding: 0; }
#nav ul li { list-style: none; text-align: left; margin: 0px; padding: 0px; border: #c9f solid 1px;}
#nav ul li a { text-decoration: none; display: block; font-size: .9em; color: #000; border-bottom: #fc9 solid 1px; }
#nav ul li a:hover, #nav ul li a:active { color: #f9c; }
#nav ul li a:hover { background-color: #fff; }
/* the following properties IE 6 and lower will ignore
because they come last, FF and other compliant browsers will override the above with these */
body > div#nav { width: 150px; margin-left: 20px; }
body > div#nav ul { width: 150px; margin: 0; padding: 0; }
/* and back to properties that IE knows */
h1, h2, h3 { margin-top: 0px; margin-bottom: 0px;} 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 Faux Column Layout
More XHTML CSS Layout Templates
