Xavier Xavier - 11 months ago 74
CSS Question

Centering fluid div having max-width

I'm trying to center my content div. It's set to 100%, and the div is contained in body, which is also set to 100%. I have a max-width: 1400px because I don't want my content to stretch more than that if the screen resolution is higher. The thing is, it doesn't work using margin: auto. My content stands on the left, uncentered on screen wider than 1400px.

If I delete the max-width, everything is perfectly centered on wide screens, but the content is stretched to the the whole screen...

#content {
width: 100%;
height: auto;
position: absolute;
top: 400px;
margin: 0 auto;
margin-top: 50px;
display: none;
max-width: 1400px;


Answer Source

You can add a media query for this: http://jsfiddle.net/derekstory/nacMP/

Note that I took off the display property, changed background and height - all for test purposes...

@media (min-width: 1400px) {
    #content {
        width: 1400px;
        margin-left: auto;
        margin-right: auto;