here is my html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <title>Untitled Document</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="content-language" content="en"> <meta name="MSSmartTagsPreventParsing" content="true"> <meta http-equiv="imagetoolbar" content="no"> <meta name="robots" content="noodp"> <!-- to Hell with the Open Directory Project --> <meta name="description" content="A brief description of the current page goes here."> <meta name="keywords" content="keywords, go, here, only, once, page, content, has, been, finished"> <link rel="stylesheet" type="text/css" href="http://www.example.com/styles/screen.css" media="screen,projection"> <link rel="stylesheet" type="text/css" href="http://www.example.com/styles/printer.css" media="print"> <link rel="stylesheet" type="text/css" href="http://www.example.com/styles/handheld.css" media="handheld"> <script type="text/javascript" src="http://www.example.com/scripts/library.js"></script> </head> <body> <div id="container"> <div id="header"> </div> <ul id="menu"> <li><a href="http://www.example.com/">Home</a></li> <li><a href="http://www.example.com/page-2/">Menu Link 2</a></li> <li><a href="http://www.example.com/page-3/">Menu Link 3</a></li> <li><a href="http://www.example.com/page-4/">Menu Link 4</a></li> <li><a href="http://www.example.com/page-5/">Menu Link 5</a></li> <li><a href="http://www.example.com/page-6/">Menu Link 6</a></li> </ul> <div id="content"> <div class="wrapper"> <!-- your main content goes here --> </div> </div> <div id="sidebar"> <!-- sidebar content goes here --> </div> <div id="footer"> <em><span title="Copyright">©</span> BlakeAnthonyDesign</em> <ul> <li><a href="htp://www.example.com/page-7/">Footer Link 1</a></li> <li><a href="htp://www.example.com/page-8/">Footer Link 2</a></li> <li><a href="htp://www.example.com/page-9/">Footer Link 3</a></li> <li><a href="htp://www.example.com/page-10/">Footer Link 4</a></li> </ul> </div> </div> </body> </html> HTML: here is my css <style type="text/css"> *{margin:0;padding:0} h1,h2,h3,h4,h5,h56,p,ul,ol {margin:0 0 .5em 0} ul,ol{margin:0 0 0 1em} a{color:yellow} a img{border:none} .header{ clear:both; height:1px; overflow:hidden; margin-top:-1px; } body{ text-align:center; background:#000; color:#F2CF94; font-family: Verdana, Arial, Helvetica, sans-serif; } #menu{ width:770px; margin:auto; text-align:left; background:url(http://i25.tinypic.com/vg1tvq.jpg) no-repeat 0 154px; min-height:764px; } * html #sidebar{height:764px} h1#sidebar, h1#sidebar a{ width:770px; height:154px; overflow:hidden; display:block; text-decoration:none; } #Our services{ float:left; width:283px; height:495px; overflow:auto; margin:22px 0 55px 80px; position:relative; display:inline; } #featured clients p{padding:5px} #featured clients{ float:right; width:312px; height:496px; margin:22px 67px 55px 0; display:inline; position:relative; } .{Portfolio width:312px; height:157px; overflow:auto; margin:0 0 20px 0; } .main{ width:312px; height:240px; overflow:auto; margin:0 0 37px 0; } .client testimonials{ width:312px; height:40px; overflow:auto; } #footer{ clear:both; text-align:right; width:672px; margin:0 auto 0; } HTML: Im having trouble with the Css of the Template that i have Provided. If anyone could look this over for me it would be greatly appreciated.This is just a preview of the template. Im not going to be using that font thats on the Image.I dont know what im doing wrong with the css and the Html can anyone help me ?
Here is the Layout thats im trying to code and im having trouble along the way I need some help with my Css.. Can you correct me what ive done wrong ?
Looks like this may be a good candidate for this technique: http://www.alistapart.com/articles/fauxabsolutepositioning
Use the float property. Like this; #something { margin:0; padding:0; background: #000; float: right or left; }