tags:

views:

4469

answers:

5

I have a #header div that is 100% width and within that div I have an unordered list. I have applied 'margin: 0 auto' to the unordered list but it won't center it within the header div.

Can anybody please tell me why? I thought that if I define the width of the parent div, then the unordered list should be able to center itself with margin: 0 auto. What am I missing?

Here is my code:

<style>

* {
    margin: 0;
    padding: 0;
}

#header {
    width: 100%; 
    background-color: #333;
    min-height: 160px;
    font-family:Arial, Helvetica, sans-serif;
}

#sitename {
    font-size: 50px;
    width: 620px;
    margin:0 auto;
    padding-top: 35px;
    color:#999;
}

#header ul {
    float: right;
    margin: 0 auto;
}

#header ul li {
    float: left;
    padding-right: 20px;
    list-style-type: none;
    font-size: 20px;
}

</style>

</head>

<body>

<div id="header">
    <h1 id="sitename">Photography Auction Site</h1>

    <ul>
        <li>List of Photos</li>
        <li>Image Gallery</li>
        <li>Contact Us</li>
    </ul>
</div>

</body>
</html>
A: 

What browser are you using? IE/Win has some problems with Margin auto.

JD
firefox right now
zeckdude
+4  A: 

You need to define the width of the element you are centering, not the parent element.

#header ul {
    margin: 0 auto;
    width: 90%;
}

Edit: Ok, I've seen the testpage now, and here is how I think you want it:

#header ul {
    list-style:none;
    margin:0 auto;
    width:90%;
}

    /* Remove the float: left; property, it interferes with display: inline and 
     * causes problems. (float: left; makes the element implicitly a block-level
     * element. It is still good to use display: inline on it to overcome a bug
     * in IE6 and below that doubles horizontal margins for floated elements)
     * The styles below is the full style for the list-items. 
     */
    #header ul li {
        color:#CCCCCC;
        display:inline;
        font-size:20px;
        padding-right:20px;
    }
PatrikAkerstrand
what if the width of the ul will be dynamic. I'm thinking of dynamically putting in different text in the li's with PHP later so I am trying to anticipate that.
zeckdude
Yup, then you can't center using margin: auto;
PatrikAkerstrand
your solution only pushes the ul to the right about 50px. It doesn't center it. Here's the page that I am working on: http://idea-palette.com/test.html
zeckdude
I tried your latest suggestion, but it didn't work. I have uploaded the newest version with your recommendations to the same location so you can see what I am experiencing. The ul is just being pushed to the right about 50px.
zeckdude
Like I said in my suggestion, remove the float: left
PatrikAkerstrand
That worked GREAT! Thank you sooo very much for sticking with me and helping me out! That problem has been killing me! Thanks again!
zeckdude
A: 

Why do you also float your ul to the right? Take that out, and probably also the float:left for the li, and you should be fine.

Simon
I am creating a navigation bar. I did take out the float right for the ul and put in a float left for the li, but that puts it all on the left now.
zeckdude
A: 

Why not?

#header {
    text-align: center;
}

#header ul {
    display: inline;
}
kls
+1  A: 

http://mycoffeecupisempty.com/article/24/html5-center-content/ explains this :)