1. Technology

Free Web Template: $$Three Column Centered Flexible Width

The CSS

By

Copy the CSS into a file called styles.css. Save this in the same directory as your HTML document. Be sure to not copy the advertisement copy that may appear within the code.

 html, body { 
 margin:0; 
 padding:0; 
 border:none; 
 }
 #container {
 width: 80%;
 max-width: 1000px; 
 min-width: 300px; 
 margin: 0 auto; 
 padding: 0;
 }
 #container h1 { 
 border: thin solid green; /* remove this line to remove the border */
 }
 #container h2 { 
 border: thin solid blue; /* remove this line to remove the border */
 }
 #col1 { 
 width: 20%; 
 float: left; /* switch this to right and container2 to left to change the column locations */
 border: thin solid black; /* remove this line to remove the border */
 }
 #container2 {
 width: 79%; 
 float: right; /* switch this to left and col1 to right to change the column locations */
 }
 #col2 {
 width: 78%;
 float: left;
 border: thin solid red; /* remove this line to remove the border */
 }
 #col3 {
 width: 20%;
 float: right;
 border: thin solid green; /* remove this line to remove the border */
 } 

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 website, 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 12/07/2008.

Return to Three Column Centered Flexible Width

More XHTML CSS Layout Templates

©2014 About.com. All rights reserved.