PDA

View Full Version : Why the hell won't this center?


Wyatt
2006-06-11, 18:52
I'm working on a new layout for my personal site, and I can't figure out why I can't get one of my divs to center. I've examined the code pretty thoroughly, and I'm sure I'm just missing something small, but I don't know what. I've been working on this all afternoon, and I'm kinda getting pissed. I'm hoping you guys can figure out what my problem is.

Here's the relevant html:


<div id="Holder">
<div id="Header">
<img src="logo.gif" width="267" height="81" alt="Ben Wyatt: Writer and Web Developer" /></div>

<div id="Menu">
<a href="bio.html">Biography</a> | <a href="articles.html">Articles</a> | <a href="gallery.html">Design Gallery</a> |
<a href="/phpbb/index.php">Forums</a> | <a href="contact.html">Contact</a></div>

<div id="Main">text</div>
<div id="Footer">Copyright &copy; 2006 Ben Wyatt. All rights reserved.</div>
</div>


And here is my CSS file:


body {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #000000;
background-color: #cccccc;
text-align: center;
margin: 0px;
padding: 0px;
}

#Holder {
text-align: left;
width: 650px;
background-color: #999999;
}

#Header {
text-align: left;
background-color: #FFFFFF;
width: 100%;
}

#Footer {
background-color: #455995;
color: white;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
padding: 2px;
text-align: center;
width: 100%;
}

#Menu {
text-align: center;
background-color: #455995;
font-family: Arial, Helvetica, sans-serif;
color: white;
font-size: 10px;
padding-bottom: 2px;
padding-top: 2px;
width: 100%;
}

#Main {
text-align: left;
background-color: white;
font-family: Arial, Helvetica, sans-serif;
color: black;
font-size: 12px;
padding: 5px;
width: 100%;
}

#Menu a, #Menu a:visited {
color: white;
text-decoration: none;
}

#Menu a:hover {
color: white;
text-decoration: none;
}

#Main a, #Main a:visited {
color: #455995;
text-decoration: underline;
}

#Main a:hover {
text-decoration: none;
}


The div with ID "Holder" isn't centering on the page as it should (because of the alignment definition in the body tag), and the text decoration hover effects on my links aren't working either. I've looked at this so much now it's all starting to blend together. Anything stand out at you?

chucker
2006-06-11, 19:03
#Holder {
margin: auto;
text-align: left;
width: 650px;
background-color: #999999;
}

Wyatt
2006-06-11, 19:12
Thanks chucker! I knew I was overlooking something small.