jasonc Posted June 27, 2011 Share Posted June 27, 2011 I have tried to add margin 0 auto and this did not work like i thought i would, how do i correctly center all of the divs on my page ? <!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" xml:lang="en" lang="en"> <head> <title>Welcome to our web site</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <style type="text/css"> /*div { border: 1px solid blue; }*/ .bodyContainer { border: 1px solid brown; float: left; width: 860px; } /* .header {background: url('images/Publication1.jpg') no-repeat center top; width: 100%; height: 75px; text-align: center; color: #693E38; font-size: 20pt; font-family: Broadway; border: 1px solid #EDB6B6; } /* #693e38 is (105,62,56) */ .header { width: 856px; height: 77px; color: #693E38; font-family: Broadway; border: 0px solid #EDB6B6; } /* #693e38 is (105,62,56) */ .menu { width: 100%; text-align: justify; font-size: 12pt; padding: 0 3px 0 10px; border: 1px solid #EDB6B6;} .subHeader{ font-weight: bold; text-decoration: underline; } ul{ list-style: none; padding: 0px; margin: 0px; } ul#navbar{ width:auto; list-style: none; padding: 0px; margin: 0px auto; height: auto; overflow: hidden; background-colour: white; display: table; } ul#navbar li, ul#navbar1 li{ float:left!important; display:inline!important; margin: 0px; } ul#navbar li a { display:block; float:left;} a:link,a:visited,a:active{ color: #757575; font-weight: bold; text-decoration: none; } a:hover{ color: #222; text-decoration: underline; } #navbar a:link,#navbar a:active,#navbar a:visited{ display:inline-block; color: #757575; text-decoration: none; border-left: 1px solid #DDD; border-right: 1px solid #DDD; padding: 8px 3px 8px 3px; /* padding: 10px 20px 10px 20px; */ margin: 0px 4px 0px 4px; /* margin: 0px 5px 0px 5px; */ } #navbar a:hover{ background: url('images/headerBarBgHover.png') repeat-x center #999999; display:inline-block; color: #222; text-decoration: underline; padding: 8px 3px 8px 3px; /* padding: 10px 20px 10px 20px; */ } .searchCategoryBox { border-right: 1px solid #EDB6B6; float: left; width: 130px; padding: 3px 3px 3px 10px; font-size: 9pt; } .results { border-top: 1px solid #F0F0F0; border-left: 1px solid #E5E5E5; border-right: 1px solid #E5E5E5; float: left; width: 695px; margin-left: 5px; padding: 3px; font-size: 9pt; } /*.resultsBackground { width: 100%; }*/ .copyright { float: left; width: 33%; text-align: center; font-size:9pt; line-height: 16px; border: 0px dashed #000; } .footer { border-top: 1px solid #EDB6B6; width: 100%; font-size: 12pt; } .clearfloat { clear: both; } .widthLimiter{ width: 980px; margin: 0 auto; } .menuwidthLimiter{ width: 1200px; margin: auto; text-align: center; } /* width: 1200px; */ </style> <meta name="description" content="" /> <meta name="keywords" content="" /> <meta name="language" content="en" /> <meta name="rating" content="General" /> </head> <body> <!-- start of pink --> <div class="bodyContainer"> <div class="header"></div> <div class="menu"> <div class="menuwidthLimiter" style="border: 0px solid #DDD;"> <ul id="navbar" style="border: 0px solid #DDD;"> <li> <a href="a.php">a</a> </li> <li> <a href="b.php">b</a> </li> <li> <a href="c.php">c</a> </li> <li> <a href="d.php">d</a> </li> <li> <a href="e.php">e</a> </li> <li> <a href="f.php">f</a> </li> <li> <a href="g.php">g</a> </li> <li> <a href="h.php">h</a> </li> </ul> </div> </div> <div class="searchCategoryBox"> left </div> <div class="results"> right </div> <br class="clearfloat" /> <div class="footer"> <div class="copyright"> left </div> <div class="copyright"> center </div> <div class="copyright"> right </div> </div> </div><!-- end of pink --> </body> </html> Quote Link to comment Share on other sites More sharing options...
Zane Posted June 27, 2011 Share Posted June 27, 2011 give your body tag a width of 860px and a margin of 0 auto; body { width: 860px; margin: 0 auto; } then give .bodyContainer a wdith of 100%; Quote Link to comment Share on other sites More sharing options...
jasonc Posted June 27, 2011 Author Share Posted June 27, 2011 ok that center the page, but my menu is jumping out of the page ? Quote Link to comment Share on other sites More sharing options...
cssfreakie Posted June 27, 2011 Share Posted June 27, 2011 That is because you use a width of 100% on your menu, and on top of that you add a padding and a border to the left of right. (not to mention a div inside of that with a fixed width of 1200px) so instead of it just being 830px it becomes 860px (see image for a visual aid) I recommend you have a read on the css boxmodel. P.s. also notice if you set a background color. you use either: background:#fff; or background-color:#fff; and not background-colour:#fff; (see line 17 of your document) [attachment deleted by admin] Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.