There is probalby something I've missed and the fact that I've stared at the same code probably result in me not seeing the problem. Anyway, here's the code as it is for the moment.XHTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xml:lang="eng" xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"/> <title>TEAM ONE - Your Slogan</title> <link rel="stylesheet" href="style.css" type="text/css"/> <meta name="keywords" content="game, design, cs, computer, cpl"/> <meta name="description" content="TEAM ONE - Your Slogan"/></head><body><div id="main"> <img src="images/big_spacer.gif" style="height: 10px; margin: 0 5px; width: 600px;" /> <div id="logo"></div> <img src="images/big_spacer.gif" style="height: 10px; margin: 0 5px; width: 600px;" /> <div id="navcontainer"> <ul id="navlist"> <li><a href="#">One</a></li> <li><a href="#">Two</a></li> <li><a href="#">Three</a></li> <li><a href="#">Four</a></li> <li><a href="#">Five</a></li> </ul> </div> <img src="images/big_spacer.gif" style="height: 10px; margin: 0 5px; width: 600px;" /> <div id="maincolumn"> <div id="leftcolumn"> Lorem Ipsum </div> <div id="rightcolumn"> Lorem Ipsum </div> <div id="footer"> Site designed and build by Cpy Designs. Use of content elsewhere not allowed. </div> </div></div></body></html>
CSS
html, body { background-color: #ccc; height: 100%; margin: 0 auto; padding: 0 auto; }#main { background-color: #fff; border: 2px solid #aaa; border-top: 0; height: 100%; margin: 0 auto; width: 610px;}#logo { background-image: url(images/banner.gif); height: 175px; margin: 0 5px; width: 600px;}#navcontainer ul { text-align: left; padding: 5px 0 5px 0; margin: 0 5px 0 5px; background-color: #f2f2f2; color: #000; width: 600px; font: normal 12px Trebuchet MS, Verdana; line-height: 12px;}#navcontainer ul li { display: inline; padding: 5px 0 5px 0;}#navcontainer ul li a { padding: 2px 10px 2px 10px; color: #000; text-decoration: none;}#navcontainer ul li a:hover { background-color: #dffe7e; color: #000;}#maincolumn { height: 100%; margin: 0 auto; width: 600px;}#leftcolumn { background-color: #f2f2f2; float: left; height: 100%; width: 400px;}#rightcolumn { background-color: #e2e2e2; float: right; height: 100%; width: 195px;}#footer { background-color: #fff; color: #555; font: normal 10px Verdana, sans-serif; height: 20px; line-height: 20px; margin: 0 auto; padding: 0; text-align: center; width: 600px;}
I hope that you can see what I've done wrong and lecture me. Thanks again for your efforts.