bmroyer Posted December 21, 2011 Share Posted December 21, 2011 My header and footer are not lining up with the content. This is just a practice website I'm doing, trying to make tabs with css without the use of images. Haven't tried it in any browser except Chrome, plus I made the layout on a netbook...not sure if that makes a difference. Tell me what you think. HTML: <link rel="stylesheet" href="style.css" type="text/css"><title>My Website</title> <body><div id = "wrapper"><div id = "header"><h1>My Website</h1></div><br /><div id = "menu"><a class="item1" href="index.html">Home</a><a class="item4" href="services.html">Services</a><a class="item2" href="about.html">About</a><a class="item3" href="faq.html">FAQ</a> <div id = "content"><p>This is where all the content goes.</p></div> </div> <div id = "footer"><b>Copyright 2011</b></div></div></body> CSS: html {text-align:center;} body {background-color:#7E2217;width:800px;margin: 0 auto;} #wrapper {width:750px;} #menu {float: left;border-bottom: none; /* avoid a double border */clear: both; /* clear:both makes sure the content div doesn't float next to this one but stays under it */width:750px;padding: 0 30px;background-color: #7E2217;text-align: left;font-size: 25px;} #menu a:link {width:50px;display: block-inline;padding:7px 5px;background:gray;border:1px solid #777;border-bottom:none;border-radius:1px 1px 0 0;margin-right:1px;color:#000;text-decoration:none;padding-bottom:1px;} #menu a:visited {color:#000;} #menu a:hover {background-color: #C2DFFF;} #menu a:active {background-color:#e4e4e4;} .item1 {background-color:#e4e4e4;} #content {width: 100%;height:500px;background-color:#e4e4e4;padding-top:10px;} #header {width:750px;height:40px;color:#fff;background-color:#6698FF;} #footer {background-color:#6698FF;width:100%;height:25px;clear:both;} Link to comment Share on other sites More sharing options...
TheGallery Posted December 21, 2011 Share Posted December 21, 2011 Your #content div is inside your #menu div. That's your problem. Link to comment Share on other sites More sharing options...
bmroyer Posted December 21, 2011 Author Share Posted December 21, 2011 I got that fixed, but for whatever reason, I can't get the page centered. Link to comment Share on other sites More sharing options...
TheGallery Posted December 21, 2011 Share Posted December 21, 2011 Use this for your your body and wrapper. body {background-color:#7E2217;} #wrapper {width:750px;margin: 0 auto;} It is your wrapper that you want to be centered so you should use the center code ( margin: 0 auto; ) when you target that, not your body. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.