My problem is i just added a side navigation and i haven't added all of the functions to it yet but for some reason it keeps pushing my content and right column below it how do i fix this that it would be next to like a 3 column design. http://img507.imageshack.us/img507/3107/navwg1.jpg CSS * { padding: 0; margin: 0; } body { background: #000000; font-family: Helvetica , Arial, sans-serif; font-size: 13px; } #wrapper { margin: 0 auto; width: 1000px; } #header { color: #333; width: 1000px; float: left; padding: none; border: none; height: 130px; margin: none; background: url(images/Raw-grip-banner.jpg); } .solidblockmenu{ margin: o; 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: 1px solid white; 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: #F2F2E6; margin: 0px 0px 0px 0px; padding: 10px; height: 350px; width: 540px; display: inline; } #rightcolumn { color: #333; border: none; background: #E7DBD5; margin: 0px 0px 0px 0px; padding: 10px; height: 350px; width: 200px; float: left; } #footer { width: 980px; clear: both; color: #333; border: none; background: #BD9C8C; margin: 0px 0px 10px 0px; padding: 10px; } Code (markup): If the html is needed dont be hasty to reply y need this fixed asap
Hard to say without the html. Will either be a problem with the widths of the columns (menu and content), or most likely from first glance a problem of the content and right menu having a clear:left or clear:both, which is making it clear the left column and appearing under it.
No problem here it is.. <!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> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Fixed Width CSS Layouts - 3 Column - fw-36-3-col</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" class="current">Articles</a></li> <li><a href="Link here">Forums</a></li> <li><a href="Link here">Shop</a></li> <li><a href="Link here">Contact Us</a></li> <li><a href="Link here">Gallery</a></li> </ul> <br style="clear: left" /> <!-- Begin Left Column --> <div id="ddblueblockmenu"> <div class="menutitle">Site </div> <ul> <li><a href="Link">Home</a></li> <li><a href="Link">What's New</a></li> <li><a href="Link">What's Revised</a></li> <li><a href="Link">Help Forums</a></li> </ul> <div class="menutitle">Article Categories</div> <ul> <li><a href="Link">Nutrition</a></li> <li><a href="Link">Performance Training</a></li> <li><a href="Link">Sport Specific Training</a></li> <li><a href="Link">BodyBuilding</a></li> <li><a href="Link">Mental Training</a></li> <li><a href="Link">Weight loss</a></li> <li><a href="Link" style="border-bottom-color: black">Links & Buttons</a></li> </ul> </div> <!-- End Left Column --> <!-- Begin Content Column --> <div id="content"> </div> <!-- End Content Column --> <!-- Begin Right Column --> <div id="rightcolumn"> Right Column </div> <!-- End Right Column --> <!-- Begin Footer --> <div id="footer"> This is the Footer </div> <!-- End Footer --> </div> <!-- End Wrapper --> </body> </html> Code (markup): O and i am fairly new to coding
Change: <div id="ddblueblockmenu"> to: <div id="ddblueblockmenu" style="float:left;"> Also you have a couple of letter 'o's in your css which should be '0' zeros.