Question

I am using a fluid layout design and I want the div with class center to be centered horizontally inside of the div with class outer. I tried this, but it doesn’t work. What am I doing wrong?

HTML:

<div class="outer">
    <div class="inner"> // this div has height=0. Why?
        <div class="center">
            // stuff
        </div>
    </div>
</div>

CSS:

.outer {
    position: absolute;
    left: 0;
    right: 0;
    top: 50px;
    height: auto;
}

.inner {
    width:100%;
}

.center {
    margin:0 auto;
}

Answer 1

use a percentage for margin-left, e.g:

.center
{
width:90%;
margin-left:5%;
}

the reason I used 5% is because since the width of center is 90% of it’s container, we have 10% of space remaining, so to center it you’ll have to bring it over to the left by half of the available space; which in this case is 5%