I was adding a content slider box and when i applied the code it completley realigned everything now i have deleted the code and i want everything back to normal but it just looks like a mess. http://img182.imageshack.us/img182/9527/badvx5.jpg It should be aligned to the left, with the horizontal navigation straight and the other nav right under it to the left side of the screen content in the middle and the right column to the right of the screen and the footer at the bottom. Can anyone help to fix this problem. Css * { padding: 0; margin: 0; } body { background: #000000; font-family: Helvetica , Arial, sans-serif; font-size: 13px; } #wrapper { margin: 0 auto; width: 400px; } #header { color: #333; width: 1000px; float: left; padding: none; border: none; height: 130px; margin: none; background: url(images/Raw-grip-banner.jpg); } .solidblockmenu{ margin: 0; padding: 0; float: left; font: bold 13px Arial; width: 100%; border: 1px solid #ffffff; border-width: 1px 0; background: black url(images/blockdefault.gif) center center repeat-x; } .solidblockmenu li{ display: inline; } .solidblockmenu li a{ float: left; color: white; padding: 9px 30px; text-decoration: none; border-right: 1px solid white; } .solidblockmenu li a:visited{ color: white; } .solidblockmenu li a:hover, .solidblockmenu li .current{ color: white; background: transparent url(images/blockactive.gif) center center repeat-x; } #ddblueblockmenu{ border-bottom-width: 1px; width: 185px; } #ddblueblockmenu ul{ margin: 0; padding: 0; list-style-type: none; font: normal 90% 'Trebuchet MS', 'Lucida Grande', Arial, sans-serif; } #ddblueblockmenu li a{ display: block; padding: 2px; width: 169px; /*185px minus all left/right paddings and margins*/ text-decoration: none; color: white; background-color: #fffffff; border-bottom: 1px solid #E6E6E6; border-left: 7px solid #4D4D4D; } * html #ddblueblockmenu li a{ /*IE only */ width: 187px; /*IE 5*/ w\idth: 169px; /*185px minus all left/right paddings and margins*/ } #ddblueblockmenu li a:hover { background-color: #404040; border-left-color: #ffffff; } #ddblueblockmenu div.menutitle{ color: white; border-bottom: 1px solid black; padding: 1px 0; padding-left: 5px; background: black url(images/blockactive.gif); font: bold 90% 'Trebuchet MS', 'Lucida Grande', Arial, sans-serif; } #content { float: left; color: #333; border: none; background: #262626; margin: 0px 0px 0px 0px; padding: 10px; height: 350px; width: 575px; display: inline; } #rightcolumn { color: #333; border: none; background: #000000; margin: 0px 0px 0px 0px; padding: 10px; height: 350px; width: 200px; float: left; } #footer { width: 980px; clear: both; color: #262626; border: none; background: #595959; margin: 0px 0px 10px 0px; padding: 10px; } Code (markup): html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <link rel="shortcut icon" href="images/favicon.ico" /> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>RawGrip.com -Training For The Elite</title> <link rel="stylesheet" type="text/css" href="main.css" /> </head> <body> <!-- Begin Wrapper --> <div id="wrapper"> <!-- Begin Header --> <div id="header"> </div> <!-- End Header --> <ul class="solidblockmenu"> <li><a href="Link here">Home</a></li> <li><a href="Link here">Articles</a></li> <li><a href="Link here">Forums</a></li> <li><a href="Link here" class="current">Shop</a></li> <li><a href="Link here">Media</a></li> <li><a href="Link here">Submit</a></li> <li><a href="Link here">Contact Us</a></li> </ul> <br style="clear: left" /> <!-- Begin Left Column --> <div id="ddblueblockmenu" style="float:left;"> <br /> <div class="menutitle">Site </div> <ul> <li><a href="link>Home</a></li> <li><a href="link">Shop</a></li> <li><a href="link">Forum</a></li> <li><a href="link">Media</a></li> </ul> <div class="menutitle">Article Categories</div> <ul> <li><a href="link">Performance Training</a></li> <li><a href="link">Sport Specific Training</a></li> <li><a href="link">Mental Training</a></li> <li><a href="link">BodyBuilding</a></li> <li><a href="link">Weight loss</a></li> <li><a href="link">Nutrition</a></li> <li><a " link">Thoughts</a></li> </ul> </div> <!-- End Left Column --> <!-- Begin Content Column --> <div id="content"> </div> <!-- End Content Column --> <!-- End Right Column --> <!-- Begin Footer --> <div id="footer"> </div> <!-- End Footer --> </div> <!-- End Wrapper --> </body> </html> Code (markup):
try removing the float:left from the .solidblockmenu or change the width of the wrapper to something wider (e.g 750px)
Your wrapper is set to a width of 400px - and by looking at the screenshot I can see that 400px is roughly where your problem starts. Simply increase the width like dalton said.