Fixed Positioned Div Inside another Div

Question

I have one div position:fixed; and my problem is that position fixed is relatively to all the page, I need that the fixed div stays inside other div that is centered in the page with margins in auto.(So when I scroll down the page I want to see always the div in the same position).

I use the jquery plugin StickyScroll but I can't make it work in Internet Explorer.

The solution could be in jquery/javascript , css.

Thanks

Antimagnetic

The defintion of fixed is that it IS positioned relative to the browser window. – Semiquaver

Which version of IE? IE6 and lower don't support position:fixed, so it's not going to work. The StickyScroll page warns about it: "We employ position: fixed styling on the sticky element, so IE6 is not supported" – Merchantable

I only need that works in IE 8, but my page and StickyScroll demos don't works in IE .. – Antimagnetic

Answer 1

Then you don't want fixed positioning, but absolute positioning.

Set position: absolute; on the element that you want to position. Set position: relative; on the centered div so that it becomes a layer that you can position elements inside.

Hertha

No, you don't understand my question, I want the same behavior of a fixed div (if I scroll down in the page I always see the div ), but inside a container. – Antimagnetic

@Antimagnetic That sounds quite contradictive. – Semiquaver

Why is contradictive, the website have 900px width, with margins auto. I have a div with instructions, so when I scroll down the page I want to see always that div. If I put for example left:300 in my 1280x800 monitor, in a 1920x1200 screen the div stays outside of the website margins... – Antimagnetic

@Sbml: Then you want both. Position an element like I described, then put another element inside that with position: fixed;. – Hertha

I agree, this is not contradictory. Absolute positioned elements do not stick to the viewport. – Lynnlynna

Thanks for the example @AdamGrant, its actually based on the concept: relative -> absolute -> fixed. – Katelin

Answer 2

You definitely don't need jQuery or JavaScript to achieve this. This is what you need:

.outer {
    width:200px;
    height:600px;
    background-color:red;
    margin:0 auto;
}
.inner {
    width:50px;
    border:1px solid white;
    position:fixed;
}

<div class="outer">
    <div class="inner">some text here
    </div>
</div>

Have a look at this: http://jsfiddle.net/2mYQe/1/

Pneumothorax

But how would this work if I wanted the inner div to fix to the right, inside the red outer container? – Lynnlynna

This is ruining my layout. When I set to fixed, the right side elements go beneath my fixed DIV and shift leftwards – Extempore

Answer 3

Just changed little in George Katsanos code might be helpful for some one.

.outer {
    width:200px;
    height:300px;
    background-color:red;
    margin:0 auto;
    overflow:auto;    
}

.inner {
    width:182px;
    border:1px solid white;
    position:absolute;
    background-color:buttonface;
}

Sample at: http://jsfiddle.net/2mYQe/480/

Bauman

It's a long while ago. Stumbling about the same thing. One problem with this solution, though. You won't see the first item in the list, because the absolute positioned inner div is above it. (change the first and second "Item name" in the fiven fiddle) – Subatomic

Answer 4

The correct solution is "flex." It's been 3-years since the original post so I'm going to assume we can ignore IE8 support in favor for more modern browsers that support this solution.

As many here have noted every proposed solution faces issues. From the first item in the content area being hidden from the absolute positioned header, or the content area consuming the full height of the parent meaning there is risk for the bottom of the content area being cut off unless you subtract the header from it's overall height (ex. height: calc(100% - "header height"px) which means you have hard-coded values in your CSS...not good, or the scroll bar being set at the parent level meaning the header is fighting it for real-estate.

In order to avoid these hack solutions use the "flex" solution below.

<div style="width: 200px; float: right; border: 1px solid black;
    display: flex; flex-direction: column;">
    <div style="width: 100%;">
        <div style="width: 100%;">
            I'm a header
        </div>
    </div>

    <div style="width: 100%; height: 100%; overflow:auto;">
        <div style="height:900px; background-color:lavender;">content area</div>
    </div>
</div>

Twentyfourmo

Answer 5

I think you should apply your inner div position as sticky, its kinda fixed too but relative to the parent container(div). I had the same problem and I fixed it like that.

<div id="container">
    <div id="inner">Some text here..</div>
</div>
    
<!-- CSS -->
<style>
    #container{
        position: <!--any position-->;
    }
    
    #inner{
        position: sticky;
    }
</style>

Dellinger