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

Question

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

Accepted Answer

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

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

Solution

Problem