Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

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

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

Problem

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:

        
        
        

Hi guys!

Or check jsfiddle

Problem courtesy of: WIRN

Solution

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

Solution courtesy of: Zach Saucier

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

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

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×