Question

I have a simple layout that consists of a #container with

#container {
    width: 775px;
    margin: 0 auto; 
}

to center it on the page with a maximum width of 775px

Then inside of that I have another div whose width varies depending on the content inside of it

.innerdiv { margin: 0 auto; }

I want it so if the .innerdiv is less than 775px, it will center within that 775px region.

The problem is that the above code is not working. I’ve wrestled with it for a bit but can’t figure out what I need to do to accomplish this.

Answer 1

write like this:

#container {
    width: 775px;
    margin: 0 auto; 
    text-align:center;
}
.innerdiv {
    display:inline-block;
    *display:inline /* IE */
    *zoom:1;/* IE */
    text-align:left;
}

Check this

http://jsfiddle.net/efEgq/