Jump to content

Header/footer Not Lining Up With Content


bmroyer
 Share

Recommended Posts

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;}

  • Like 1
Link to comment
Share on other sites

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.

Edited by TheGallery
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...