Hey, i run into a little problem when helping my mum make her website for her villa, so here it is; www.surfblind.com/eden here is the css /* CSS Document */ body { background:#ffffff; margin: 10; padding: 0; font: 0.9em "Arial", Helvetica, Sans-Serif; } #wrapper { width:850px; height:auto; margin: 0 auto; padding: 0px; border:solid 2px #631607; background-color:#FBE8A4; } /*header*/ #header { border: solid; color:#631607; width: 800px; height:200px; margin-left:25px; margin-right:25px; margin-top:10px; margin-bottom:25px; } /* header over*/ /*links*/ a { color: #631607; background-color: inherit; } a:hover { color: #000000; background-color: inherit; } a:visited { color: #631607; background-color: inherit; } /*links over*/ #inner { width:800px; margin:auto; margin-top:25px; } /*MENU*/ #menu{ width: 150px; margin-bottom:25px; margin-left:25px; padding: 0; font-size: 0.9em; float:left; } #menu ul { list-style: none; width: 150px; margin: 0 0 20px 0; padding: 0; font-size: 1.1em; } #menu li { margin-bottom: 4px; } #menu li a { font-weight: bold; height: 20px; text-decoration: none; color: #FBE8A4; display: block; padding: 6px 0 0 10px; background: #814337; border-left: 4px solid #631607; border-right: 4px solid #631607; } #menu li a:hover { background: #631607; color: #FBE8A4; border-left: 4px solid #814337; border-right: 4px solid #814337; } /* MENU OVER*/ #content { width:600px; border:solid #631607; margin-right:25px; margin-bottom:25px; float:right; } #footer { border-top:solid 8px #631607; background-color: #79332E; width:800px; margin-top:25px; margin-bottom:25px; margin:auto; } PHP: as you can see the #wrapper tag seems to stop before it should, i want it so it contains the menu and the content box, any help is appreciated. Thanks Danny
Here's a quick fix for your code <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Villa Eden - Terra Verde Resort, Florida</title> <link rel="stylesheet" href="style/style.css" media="screen" /> </head> <body> <div id="wrapper"> <div id="header"> <img src="images/head.gif" alt="rtghrtg"/> </div> <div id="menu"> <ul> <li><a href="#">Home</a></li> <li><a href="#">Gallery</a></li> <li><a href="#">Resort</a></li> <li><a href="#">Prices</a></li> <li><a href="#">Booking</a></li> <li><a href="#">Car Hire</a></li> <li><a href="#">Tickets</a></li> <li><a href="#">Golf</a></li> <li><a href="#">Guest Book</a></li> <li><a href="#">Contact Us</a></li> </ul> </div> <div id="content"> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> </div><br clear="all" /> </div> </body> </html> Code (markup):
i once had this problem.....and it drove me completely crazy. The other way is to create a blank div, and set the css style for that div to "clear:both"
This might also drive one crazy as it proves not fully working all the time, depending on how complex your layout is. So I just use the <br /> tag and the "clear" attribute. This one has always worked fine.