Footer does not stretch to 100% width

I want the width of my footer to stretch 100% of the page. However, I have defined min-width:1000px, and max-width:1000px on the body of the HTML document to help create a fluid layout. Now when I create the footer setting it to max/min-width:100% it does not span across the whole page, and is restricted by the min/max-width set on the body. Is there a way set the width of the footer to be 100% whilst having the min/max-width defined at 1000px in body? The code for the HTML and CSS is:

HTML:

<!doctype html>
<html lang="en">
<head>
Some Text
</head>
<body>

<header>
Some Text
</header>
<section class="mainSection">
    <article class="mainArticle">
            <header>
                <h4>Some Text</h4>
            </header>
            <p>
                    Some text
            </p>
    </article>
</section>
<footer>
    <section class="footerSection">
        <article class="footerArticle">
            <p>Some Text</p>
        </article>
    </section>
</footer>

CSS:

body{
    margin:0px auto;
    min-width:1000px;
    max-width:1000px;
    height:auto;
    background-color: #97cdcd;
    background-size: 5px 5px;
    background-image: linear-gradient(rgba(189, 204, 211, .50) 50%, transparent 50%, transparent);
    background-image: -webkit-linear-gradient(rgba(189, 204, 211, .50) 50%, transparent 50%, transparent);
    background-image: -moz-linear-gradient(rgba(189, 204, 211, .50) 50%, transparent 50%, transparent);
}
body > footer{
    margin:0px;
    padding:0px;
    min-width:100%;
    max-width:100%;
    background:#ffffff;
    height:auto;
}

Solution

Instead of defining the max and min width on the body, make a content div to wrap your main content area and apply the max and min styles for that area on your content div.

Because your footer is a child to the body and not outside the normal flow, it will always be restricted by the body's width, due to the box model. This is actually very useful, so long as you keep the rules of the box model and flow in mind. So, if the footer isn't supposed to be bounded by those attributes, those attributes should apply to a sibling of the footer rather than its parent.

For example, you could just apply the max/min on your section element if you don't need the header to have those rules applied as well. Otherwise do something like:

<!doctype html>
<html lang="en">
<head>
Some Text
</head>
<body>
<div class="content-wrapper">
<header>
Some Text
</header>
<section class="mainSection">
    <article class="mainArticle">
            <header>
                <h4>Some Text</h4>
            </header>
            <p>
                    Some text
            </p>
    </article>
</section>
</div>
<footer>
    <section class="footerSection">
        <article class="footerArticle">
            <p>Some Text</p>
        </article>
    </section>
</footer>

</body>

CSS:

    .content-wrapper{
        margin:0px auto;
        min-width:1000px;
        max-width:1000px;
        height:auto;
        background-color: #97cdcd;
        background-size: 5px 5px;
        background-image: linear-gradient(rgba(189, 204, 211, .50) 50%, transparent 50%, transparent);
        background-image: -webkit-linear-gradient(rgba(189, 204, 211, .50) 50%, transparent 50%, transparent);
        background-image: -moz-linear-gradient(rgba(189, 204, 211, .50) 50%, transparent 50%, transparent);
    }
    body > footer{
        margin:0px;
        padding:0px;
        min-width:100%;
        max-width:100%;
        background:#ffffff;
        height:auto;
    }

Obviously some of the styles you may want to apply to the entire body instead of the content-wrapper div, this is just an example.