CODEWITHSUNDEEP
htmlcssresponsive-design
WIRN
WIRN

Reputation: 947

CSS issue: fixed footer with width of 100% is too wide

I'm trying out using % instead of px and it behaves a bit strange. Why is my footer continuing to the right (outside the element "pagePlaceHolderInner") It works if I set both elements ("pagePlaceHolderInner" and "footer") to a certain px-number but I want to use % here.

The code:

        <html>
        <head>
        <style type="text/css">
        body #pagePlaceHolderOuter {
            background: #FFFFFF;
            height: 100%;
            left: 0;
            position: absolute;
            top: 0;
            width: 100%;
        }
        body #pagePlaceHolderOuter #pagePlaceHolderInner {
            background: none repeat scroll 0 0 yellow;
            height: 100%;
            margin: 0 auto;
            max-width: 1000px;
            min-width: 700px;
            width: 70%;
        }
        body #pagePlaceHolderOuter #pagePlaceHolderInner .footer {
            background: gray;
            bottom: 0;
            height: 20%;
            position: fixed;
            width: 100%;
        }
        </style>
        </head>
        <body>

        <div id="pagePlaceHolderOuter">
            <div id="pagePlaceHolderInner">
                <h1>Hi guys!</h1>
                <div class="footer"></div>
            </div>
        </div>

        </body>
        </html>

Or check jsfiddle

Upvotes: 4

Views: 17082

Answers (4)

Andy59469
Andy59469

Reputation: 2044

Your fixed element width is expanding because of the width of other elements on the page.

You may have an element on the page which is wider than the screen width. A fixed element is effectively put at the top of the DOM and is not bound by the restraints of its parents.

One way to restrict your fixed elements width is to use the CSS3 vw unit (which sizes relative to the viewport. eg width: 100vw. It is now an acceptable unit in most major browsers.

https://www.w3schools.com/cssref/css_units.asp

Upvotes: 1

Ankit Agrawal
Ankit Agrawal

Reputation: 6124

Try this code, I hope it will help you 

body #pagePlaceHolderOuter {
    background: #FFFFFF;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}
body #pagePlaceHolderOuter #pagePlaceHolderInner {
    background: none repeat scroll 0 0 yellow;
    height: 100%;
    margin: 0 auto;
    max-width: 1000px;
    min-width: 700px;
    width: 70%;
    position:relative;
}
body #pagePlaceHolderOuter #pagePlaceHolderInner .footer {
    background: gray;
    bottom: 0;
    height: 20%;
    position: absolute;
    width: 100%;
}

Upvotes: 0

Zach Saucier
Zach Saucier

Reputation: 25954

You cannot fix an element to a container the way you conventionally would like fixing it in reference to the whole page. Instead you can have to manually give it the same dimensions of the parent because it doesn't act like a usual child, but rather acts like an element positioned directly below the document

body #pagePlaceHolderOuter #pagePlaceHolderInner .footer {
    position: fixed;
    height: 100%;
    margin: 0 auto;
    max-width: 1000px;
    min-width: 700px;
    width: 70%;
    /* The rest of your code for this element */
}

Demo here

An alternative so it inherit the parent's values is to make its position absolute instead, though this isn't quite what you want. To do this you need to add position:relative; to it's container as well

body #pagePlaceHolderOuter #pagePlaceHolderInner {
    position:relative;
    /* The rest of your code for this element */
}
body #pagePlaceHolderOuter #pagePlaceHolderInner .footer {
    position:absolute;
    /* The rest of your code for this element */
}

Updated jsFiddle

Upvotes: 3

Marc Audet
Marc Audet

Reputation: 46785

For Footer Fixed To Page Bottom

I think you might be trying to do this:

body #pagePlaceHolderOuter #pagePlaceHolderInner .footer {
    background: gray;
    position: fixed;
    height: 20%;
    bottom: 0;
    margin: 0 auto;
    width: 70%;
    min-width: 700px
}

see demo fiddle: http://jsfiddle.net/audetwebdesign/ktM6n/

You need to adjust your footer width and margins similarly to the pagePlaceHolderInner block level container.

If you want your footer to be fixed to the bottom of the viewport, this is the way to match the width to the rest of the layout.

The origin of the problem is that elements with position: fixed are taken out of the flow and are sized and positioned with respect to the root level element (the view port). Once you realize that, the solution is straightforward.

Upvotes: 1

Related Questions