Fixed non scrolling footer inside a div?

Question

I am making a small div on the center of the page which has a footer which is fixed but the div is scroll-able. According to me there are two ways to do it: - Using `position:fixed` : Fixed position actually work relative to the browser window but I want position relative to my small div - Using `position:absolute` : Using `bottom:0;` I solved the problem initially but the footer scroll with the div text. HTML: ```

Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some…

Accepted Answer

Solution: inside your outer `#wrapper`, create another wrapper for the `#box` - see http://jsfiddle.net/thebabydino/6W5uq/30/

You style your box wrapper:

```
.box-wrap {
    width:400px;
    height:300px;
    margin:100px auto;  
    position:relative;
}
```

... you take out the `width`, the `margin`s and `position:relative` for the `#box`:

```
#box {
    height:300px;
    margin:0;
    border:medium dashed #c00;    
    overflow:auto;
}
```

... and you take into account the `border`s for the `#box` when positioning the `#footer`.

One more thing: `position: fixed` is not relative to a parent, but to the browser window, so it's not the way to go in this case.

Fixed non scrolling footer inside a div?

Solution

Problem