CSS Page Centering

Question

I'm not sure where my code is messed up, but I'm trying to get my code to center. Here is what I have so far:

The problem that I am running into is that the page won't actually center. When it loads, the left margin is only a 10px. I'm sure there is a conflict somewhere, or I just borked something, and I've been searching for hours now, and have found nothing. Here is the following code:

body {
background-color: #12121D;
}   

#contain {
display: block;
width: 1000px;
margin: 0 auto;
}

.version{
text-align:right;
font-family: Calibri, sans-serif, serif;
text-decoration:none;
color:#00F;
}

#header {
width: 1000px;
height: 230px;
    }

#logo {
width: 600px;
margin: 50px 0px 0px 10px;
padding: 0px;
float: left;
position: absolute;
  }

#banner {
text-align: right;
float: right;
z-index: -1;
    }

#menu {
height: 80px;
margin: 0 auto;
}

#main {
height: 500px;
width: 850px;
margin-left: 75px;
/*position: absolute;*/
z-index: 4;
/*float: left*/;
  }

#content {
width: 850px;
height: 500px;
float: left;
margin-left: 0px;
     }

And the html follows as:

<body>
<div id="contain">
    <div id="header">
        <div id="logo"> <img src="images/logo.png" alt="logo" />
        <br />
        <a class="version" href="JavaScript:changeSheets(1)">View       Mobile<a/>
        </div>
        <div id="banner"><img src="images/banner.png" alt="banner"/></div>
    </div>
<div id="menu">
    <div class="pages">
    <ul>
        <li><a href="index.html">Front Page</a></li>
        <li><a href="reviews.html">Reviews</a></li>
        <li><a href="releases.html">Releases</a></li>
        <li><a href="author.html">About Me</a></li>
        <li><a href="contact.html">Contact Info</a></li>
    </ul>
    </div>
</div>
<div id="main">
    <div id="content">
        <div class="why" id="whyBackground"> <img src="images/reviewsites.png" alt="reviewsites"/>
            <h1>Why am I doing this?</h1>
            <br />
            Insert text here
            <h1>What is my goal?</h1>
            Insert text here
        </div>
    </div>
</div>
</div>
</body>

#contain is 1000px. What's your browser/screen size currently? (I know, probably a dumb question, but who knows?) — Terry Young, Apr 24 '13 at 17:14
Yours will look different. We don't have the sources for your images, etc. So it won't display the same. — EnigmaRM, Apr 24 '13 at 17:20
@TerryYoung Here is the link to my current code: http://jsbin.com/itiwez/2/edit I just can't get it to center. — Jake Scarn, Apr 24 '13 at 18:48
I removed `@charset "utf-8"` in your CSS and it instantly worked (at least in your jsbin demo). Is your CSS file actually in UTF-8 format? — Terry Young, Apr 24 '13 at 19:07

score 0 · Answer 1 · answered Apr 24 '13 at 17:23

0

Hi there is Your code:

http://jsfiddle.net/w9Zgc/2/

On my screen larger 1920px page is centered. I think that you have screen resolution close to 1024px width so than left margin left equal 10px is quite reasonable. Another advice is to reset padding and margin of body

body, html {
    padding:0;
    margin: 0;
}

answered Apr 24 '13 at 17:23

Bartek Bielawa

562
4
10

Here is my entire code (with edits): http://jsbin.com/itiwez/1/edit If I take the code I posted earlier, some people have it centering. So it must be something that I've added outside of what I posted here. Any help (and the help you've provided) would be greatly appreciated. – Jake Scarn Apr 24 '13 at 18:26

score -1 · Answer 2 · answered Apr 24 '13 at 17:21

-1

One thing that will help you center a div is to specify the width, and then set the right & left margins to auto:

#main{
   width: 850px;
   margin-left: auto;
   margin-right: auto;
}

answered Apr 24 '13 at 17:21

EnigmaRM

7,523
11
46
72

He already had `margin: 0 auto;`, which should already set left and right margins to `auto` – Terry Young Apr 24 '13 at 17:28

score -1 · Answer 3 · edited May 23 '17 at 12:08

-1

Judging from your link at http://jsbin.com/itiwez/2/edit

I removed @charset "utf-8" in your CSS and it instantly worked (at least in your jsbin demo). Is your CSS file actually in UTF-8 format?

FYI: Why specify @charset "UTF-8"; in your CSS file?

edited May 23 '17 at 12:08

Community

1
1

answered Apr 24 '13 at 19:09

Terry Young

3,531
1
20
21

And thank yourself for your own effort in presenting the issue. So I assume my answer is correct? – Terry Young Apr 24 '13 at 19:13

CSS Page Centering

3 Answers3