CSS Centering Issues

**kdallstar** · 04-11-2012 08:01 AM

I am having some issues with centering my webpage with css. I have set the margins as auto and the width as 760px, and my page is somewhat centered. However the contents still little bit right of the page. I'm including the code below. Any help will be greatly appreciated.

body {
background-image:url(../images/slice.gif);
background-repeat:repeat-x;
}
#wrap {
margin-left:auto;
margin-right:auto;
width:760px;
}

#header img {
float:left;
margin:-10px 0px 0px 0px;
}
#header ul {
float:left;
list-style:none;
}
#header li {
float:left;
display:inline;
font-family:Arial, Helvetica, sans-serif;
color:#FFF;
font-size:24px;
padding:0px 32px 0px 0px;
}
#header p{
float:right;
color:#FFF;
font-size:24px;
text-decoration:underline;
font-family:Arial, Helvetica, sans-serif;
margin: 16px 0px 0px 0px;
}

#header li a {
text-decoration:none;
}
#header li a:visited {
float:left;
display:inline;
font-family:Arial, Helvetica, sans-serif;
color:#FFF;
font-size:24px;
padding:0px 30px 0px 0px;
}
#header li a:hover {
text-decoration:underline;
color:#FFF;
}
#header p a:hover {
color:#0099CC;
}
#header #social {
float:right;
margin: -100px 0px 0px 0px;
}
#header p a:visited {
float:right;
color:#FFF;
font-size:24px;
text-decoration:underline;
font-family:Arial, Helvetica, sans-serif;
margin: 16px 0px 0px 0px;
}

**masterwin** · 04-11-2012 08:17 AM

body
{
margin:auto;
width:100%;

}
.fiv
{
margin:auto;
width:768px;
border:1px solid red;
background:center;
}
<html>
<body>
<div class="fiv"> HI, welcome </div>

</body>
</html>

**kdallstar** · 04-11-2012 08:22 AM

Unfortunately this did not fix my problem, it did however move my contents upwards by a bit. I'm guessing one of my margins that I set below may have moved my contents right

**masterwin** · 04-11-2012 08:24 AM

have you provided margin to "content" div?

can you paste all the codes?

**kdallstar** · 04-11-2012 08:26 AM

sure my html code is included below, and i have set auto margins for the content div

<!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=utf-8" />
<title>Site</title>
<link href="style/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="wrap">
<div id="header">
<a href="#"><img src="images/Logo.gif" /></a>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
<p><a href="#">#Wheatley2012</a></p>
<ul id="social">
<li><a href="http://tinyurl.com/cerxupe"><img src="images/google_32.png" /></a></li>
<li><a href="https://www.facebook.com/wheatley.laboratories"><img src="images/facebook_32.png"/></a></li>
<li><a href="http://ps3.ign.com/objects/064/064329.html"><img src="images/playstation_32.png" /></a></li>
<li><a href="http://store.steampowered.com/app/620/"><img src="images/steam_32.png" /></a></li>
</ul>
</div>
</div>
</body>
</html>

**masterwin** · 04-11-2012 08:34 AM

add "text-align:center;" on #wrap class

**kdallstar** · 04-11-2012 09:21 AM

That did not fix it either. I think one of the margins I set below is causing this but I can't determine which one

**Epic621** · 04-11-2012 11:01 AM

Code:

#wrap {
position:relative;
margin-left:auto;
margin-right:auto;
width:760px;
}

If that does not work try:

Code:

#wrap {
position:relative !important;
margin-left:auto;
margin-right:auto;
width:760px;
}

**kdallstar** · 04-11-2012 12:43 PM

that didnt work either

**s5nelson** · 04-11-2012 04:50 PM

#wrap {
margin: 0 auto;
width:760px;
}

Thread: CSS Centering Issues

Thread Tools

Display

Hybrid View

CSS Centering Issues

Thread Information

Users Browsing this Thread

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions