CODEWITHSUNDEEP
htmlcss
Niels Hermann
Niels Hermann

Reputation: 538

margin: auto is not centering my div even though width is set

Okay, this bugs me, because it's such a small problem - but apparently I can't make it work.

I'm making a responsive/fluid website. Here is the HTML:

<div id="Wrapper">
    <div id="InnerWrapper">
        stuff...
    </div>
</div>

CSS:

* {
    outline: none;
    font-family: 'PT Sans', sans-serif;
    font-size: 16px;
    resize: none;
    font-style: normal;
    font-variant: normal;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
html {
}
body {
    background: #f2f2f2; /*#f6f6f6;*/
    margin: auto;
    height: 100%;
    overflow-x: hidden;
}

/*MOBILE*/
@media (min-width: 200px) {
    #Wrapper {
        width: 100%;
        height: auto;
        float: left;
        margin: 42px 0 0 0;
    }
        #InnerWrapper {
            width: 96%;
            float: left;
            margin: 10px 2%;
        }
}
/*TABLET*/
@media (min-width: 600px) {
    #Wrapper {
        width: 100%;
        height: auto;
        float: left;
        margin: 42px 0 0 0;
    }
        #InnerWrapper {
            width: 96%;
            float: left;
            margin: 10px 2%;
        }
}
/*PC*/
@media (min-width: 980px) {
    #Wrapper {
        width: 980px;
        height: auto;
        margin: 42px auto 0 auto;
        border: 1px solid red;
    }
        #InnerWrapper {
            width: 980px;
            margin: 10px 0 0 0;
            border: 1px solid green;
        }
}

So... when the browser-width is more than 980px the design should be fixed to 980px which is does. What it doesn't do is - centering!

How can I fix this. This bugs me.

Upvotes: 0

Views: 41

Answers (1)

Quentin
Quentin

Reputation: 943142

The element is float: left. The floating layout algorithm takes priority over margins and forces the element to the left (allowing content following it to bubble up beside it).

Don't float it when you want it centred.

Upvotes: 3

Related Questions