i created this css template because i use it so much when making new sites, its my default i use: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>cherry trees</title> <meta name="description" content="desc"> <meta name="keywords" content="key"> <style type="text/css"> <!-- .main { border: 2px solid #333333; padding: 10px; float: left; } .header { border: 1px solid #3F3F3F; padding: 5px; margin-bottom: 10px; background-color: #F7F7F7; }  .page_message { padding: 5px; height: 38px; } .left_col { border: 1px solid #3F3F3F; padding: 5px; width: 150px; float: left; background-color: #FFFFCC; } .right_col { border: 1px solid #3F3F3F; padding: 5px; margin-left: 10px; float: left;  } .footer { border: 1px solid #3F3F3F; padding: 5px; background-color: #E1F3FF; float: left; width: 960px; margin-top: 10px; }  .main_menu { width: 100%; height: 25px; background-color: #2D2F3E; } a.main-menu, a.main-menu:active, a.main-menu:link, a.main-menu:visited { text-transform: uppercase; font-weight: bold; text-decoration: none; padding: 5px 10px; float: left; text-align: center; color: #FFFFFF; border-right-width: 1px; border-right-style: solid; border-right-color: #595E7B; } a.main-menu:hover { text-decoration: underline; color: #FFFF00; }  A.category_link:link, A.category_link:visited { COLOR: #000099; TEXT-DECORATION: none;  width: 100%; }  A.category_link:hover { TEXT-DECORATION: underline; color: #CC3300; } .category { list-style-type: none; text-align: left; float: left; width: 100%; } --> </style> </head>  <body> <div class="main"> <div class="header"> Title: cherry trees<br>  Description: desc<br> Tags: key<br> </div><!-- end header class -->  <div class="left_col">  <div class="category"><a href="http://localhost/myscripts/mypages/category/food.html" class="category_link">root</a> </div><div class="category">&nbsp; <a href="http://localhost/myscripts/mypages/category/.html" class="category_link">fruit</a> </div><div class="category">&nbsp; &nbsp; <a href="http://localhost/myscripts/mypages/category/red.html" class="category_link">red</a> </div><div class="category">&nbsp; &nbsp; &nbsp; <a href="http://localhost/myscripts/mypages/category/cherry.html" class="category_link">cherry</a> </div><div class="category">&nbsp; &nbsp; &nbsp; &nbsp; <a href="http://localhost/myscripts/mypages/category/ming.html" class="category_link">ming</a> </div><div class="category">&nbsp; &nbsp; &nbsp; <a href="http://localhost/myscripts/mypages/category/strawberry.html" class="category_link">strawberry</a> </div><div class="category">&nbsp; &nbsp; &nbsp; <a href="http://localhost/myscripts/mypages/category/apple.html" class="category_link">apple</a> </div><div class="category">&nbsp; &nbsp; &nbsp; &nbsp; <a href="http://localhost/myscripts/mypages/category/grany.html" class="category_link">grany</a> </div><div class="category">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a href="http://localhost/myscripts/mypages/category/washington.html" class="category_link">washington</a> </div><div class="category">&nbsp; &nbsp; <a href="http://localhost/myscripts/mypages/category/yellow.html" class="category_link">yellow</a> </div><div class="category">&nbsp; &nbsp; &nbsp; <a href="http://localhost/myscripts/mypages/category/banana.html" class="category_link">banana</a> </div><div class="category">&nbsp; &nbsp; &nbsp; <a href="http://localhost/myscripts/mypages/category/pineapple.html" class="category_link">pineapple</a> </div><div class="category">&nbsp; <a href="http://localhost/myscripts/mypages/category/meat.html" class="category_link">meat</a> </div><div class="category">&nbsp; &nbsp; <a href="http://localhost/myscripts/mypages/category/beef.html" class="category_link">beef</a> </div><div class="category">&nbsp; &nbsp; <a href="http://localhost/myscripts/mypages/category/pork.html" class="category_link">pork</a> </div>  </div><!-- end left_col class --> <div class="right_col">  <a href="http://localhost/myscripts/mypages/testing.html">im testing</a> | </div> <!-- end right_col class -->  <div class="footer"> Login: </div><!-- end footer class -->  </div><!-- end main class --> </body> </html>


so if you want to see it in action, you can just copy and paste this code into text editor like notepad and save the file as webune.html and upload it to your website and you will see how it look

here is version 2 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>cherry trees</title> <meta name="description" content="desc"> <meta name="keywords" content="key"> <meta name="robots" content="index,follow"> <style type="text/css"> <!-- .main { border: 2px solid #333333; padding: 10px; float: left; } .header { border: 1px solid #3F3F3F; padding: 5px; margin-bottom: 10px; background-color: #F7F7F7; }  .page_message { padding: 5px; height: 38px; } .left_col { border: 1px solid #3F3F3F; padding: 5px; max-width: 150px; float: left; background-color: #FFFFCC; } .right_col { border: 1px solid #3F3F3F; padding: 5px; margin-left: 10px; float: left;  } .footer { 	clear:both; border: 1px solid #3F3F3F; padding: 5px; background-color: #E1F3FF; max-width: 960px; margin-top: 10px; }  .main_menu { max-width: 100%; height: 25px; background-color: #2D2F3E; } a.main-menu, a.main-menu:active, a.main-menu:link, a.main-menu:visited { text-transform: uppercase; font-weight: bold; text-decoration: none; padding: 5px 10px; float: left; text-align: center; color: #FFFFFF; border-right-max-width: 1px; border-right-style: solid; border-right-color: #595E7B; } a.main-menu:hover { text-decoration: underline; color: #FFFF00; }  A.category_link:link, A.category_link:visited { COLOR: #000099; TEXT-DECORATION: none;  max-width: 100%; }  A.category_link:hover { TEXT-DECORATION: underline; color: #CC3300; } .category { list-style-type: none; text-align: left; float: left; max-width: 100%; } --> </style> </head>  <body> <div class="main"> <div class="header"> Title: cherry trees<br>  Description: desc<br> Tags: key<br> </div><!-- end header class -->  <div class="left_col">  <div class="category"><a href="http://localhost/myscripts/mypages/category/food.html" class="category_link">root</a> </div><div class="category">&nbsp; <a href="http://localhost/myscripts/mypages/category/.html" class="category_link">fruit</a> </div><div class="category">&nbsp; &nbsp; <a href="http://localhost/myscripts/mypages/category/red.html" class="category_link">red</a> </div><div class="category">&nbsp; &nbsp; &nbsp; <a href="http://localhost/myscripts/mypages/category/cherry.html" class="category_link">cherry</a> </div><div class="category">&nbsp; &nbsp; &nbsp; &nbsp; <a href="http://localhost/myscripts/mypages/category/ming.html" class="category_link">ming</a> </div><div class="category">&nbsp; &nbsp; &nbsp; <a href="http://localhost/myscripts/mypages/category/strawberry.html" class="category_link">strawberry</a> </div><div class="category">&nbsp; &nbsp; &nbsp; <a href="http://localhost/myscripts/mypages/category/apple.html" class="category_link">apple</a> </div><div class="category">&nbsp; &nbsp; &nbsp; &nbsp; <a href="http://localhost/myscripts/mypages/category/grany.html" class="category_link">grany</a> </div><div class="category">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a href="http://localhost/myscripts/mypages/category/washington.html" class="category_link">washington</a> </div><div class="category">&nbsp; &nbsp; <a href="http://localhost/myscripts/mypages/category/yellow.html" class="category_link">yellow</a> </div><div class="category">&nbsp; &nbsp; &nbsp; <a href="http://localhost/myscripts/mypages/category/banana.html" class="category_link">banana</a> </div><div class="category">&nbsp; &nbsp; &nbsp; <a href="http://localhost/myscripts/mypages/category/pineapple.html" class="category_link">pineapple</a> </div><div class="category">&nbsp; <a href="http://localhost/myscripts/mypages/category/meat.html" class="category_link">meat</a> </div><div class="category">&nbsp; &nbsp; <a href="http://localhost/myscripts/mypages/category/beef.html" class="category_link">beef</a> </div><div class="category">&nbsp; &nbsp; <a href="http://localhost/myscripts/mypages/category/pork.html" class="category_link">pork</a> </div>  </div><!-- end left_col class --> <div class="right_col">  <a href="http://localhost/myscripts/mypages/testing.html">im testing</a> | </div> <!-- end right_col class -->  <div class="footer"> Login: </div><!-- end footer class -->  </div><!-- end main class --> </body> </html>