Footer does not stretch to 100% width

html width footer css

17,286

Solution 1

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.

Solution 2

Simply: No - the footer is a child of the body, and the width percentage property is relative to the parent.

In this case, you have set the body element (parent) to a fixed width, and therefore the child will not be fluid. Instead, by giving it 100% width, you are saying, give it 100% the width of the body element, i.e. 1000px.

The only way to fix it if you're intent on keeping the max and min width properties on the body is by absolutely positioning the footer - not ideal. I would suggest you remove the max and min properties and try a different approach altogether.

17,286

Author by

Human

Updated on June 04, 2022

Comments

Human almost 2 years

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;
}