Hi there. Ran into this issue with centering a div within a wrapper div. The child div is not centering in relation to the parent div in Firefox 2.

My Google searches on this problem have revealed solutions that look similar to this:

div#wrapperdiv {
   text-align: center;
}


div#div_to_be_centered {
   text-align: left;
   margin: 0 auto;
   width: 650px;
}

Now when I apply this idea to my own site I am not getting the desired effect. IE7 is centering the child since I think it is reacting to the text-align: center; code in the parent div. But FF is not centering the inner div. Here is my code:

.outer-div {
    width: 558px;
    background-color:#9999FF;
    text-align: center;
}

.inner-div {
    margin 0 auto 0 auto;
    width: 380px;
    background-color: #009900;
    border-color: #00ff00;
    border: 2px solid;
    font-family:Arial, Helvetica, sans-serif;
    font-size: 14px;
    color: #00ff00;
    padding: 40 0 20 0;
}

I'm stumped, but thinking it may have to do with my outer-div being further wrapped inside a floating div, which is inside an even larger div.. Can this nesting of divs be the issue?

Here is a live example of it:

http://public.zeidelicious.com/stakes.html

The green box in the right column is the problem div.

Syntax error. Colon missing in the margin value.