Hi, i am currently just putting togther a webpage and i have come accross a problem, any help is appreciated live link www.surfblind.com/florida CSS body { margin: 0; padding: 0; background: #999999; font: normal .7em Tahoma, Verdana, Arial, Helvetica, Sans-Serif; line-height: 1.6em;} #wrapper { width:850px; height:100%; margin:auto; border-left: #ffffff solid 15px; border-right: #ffffff solid 15px; background-color: #FFCC66;} #header { height:90px; colour: 000; margin: auto; width:850px; background: #FFCC66 url(images/bbdot.gif) repeat-x; background-position:bottom;} #maincont { width:850px; margin:auto; } #main { width: 550px; background-color:#FFCC66; margin-top: 10px; margin-left: 290px; margin-bottom: 10px; } .title1 { height: 30px; background: #FFCC66 url(images/box.gif) repeat-x left bottom; border: 1px solid #F3A40A; font-size: 1em; color: #FFFFFF; padding-top: 10px; padding-left:10px;} .content1 { margin: auto; background: #7FA5FB; border-bottom:solid 2px #F3A40A; padding: 10px 15px 15px 10px;} #sidebar { width: 260px; background-color:#FFCC66; margin-top: 10px; margin-bottom: 10px; margin-left:10px;} .title { height: 30px; background: #FFCC66 url(images/box1.gif) repeat-x left bottom; border: 1px solid #F3A40A; font-size: 1em; color: #FFFFFF; padding-top: 10px; padding-left:10px;} .content { margin: auto; background: #7FA5FB; border-bottom:solid 2px #F3A40A; padding: 10px 15px 15px 10px;} Code (markup): and the xhtml <!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>Florida Basics</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <div id="wrapper"> <div id="header"><img src="images/logo.gif" /></div> <div id="sidebar"> <h2 class="title">Welcome to Florida Basics </h2> <div class="content"> <p>"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"</p> </div> </div> <div id="main"> <h2 class="title1">Welcome to Florida Basics </h2> <div class="content1"> <p>"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"</p> </div> </div> </div> </body> </html> Code (markup): once again any help is appreciated Danny
float your sidebar to the left. float: left; If that doesn't work, set the right margin to be the same size as the main content area.
Also make sure that the widths add up properly, taking margins and borders into account (the "box model"). For example, if you have a 500px wide box, with 10px margins and 5px borders on each side, that box would be 530px wide instead of 500 (500 for the width, then 15px total margins and borders on each side). I'm away from my development computer right now so I can't look at your code (or fix it), but I'll be able to when I get back home.