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

Solution 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.

Solution 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/

Solution 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/

Comments

[Sbml]

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.

[joakimdahlstrom]

@Sbml That sounds quite contradictive.

[Sbml]

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...

[Guffa]

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

[Adam Grant]

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

[Adam Grant]

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

[Seb]

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)

[Rehmat]

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

[Dharmaraj]

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