Fluid width fixed position

Question

Imagine:

Where:

• .outer is

Answer 1

position:fixed is always relative to viewport/browser window, not to ancestors.

Answer 2

.outer {
    position: relative;
    width: %;
}
.inner {
    position: fixed;
    width: inherit;
}

That should do the trick.

Answer 3

Use this :

.inner { position: fixed; left:0; right:0;

}

Answer 4

What about using something like this fiddle ?

.outer {
    width: 20%;
    height: 1200px;
    margin-left: 5%;
    float: left;
}
.inner {
    height: 200px;
    position: fixed;
    top: 0;
    background: orange;
    right: 75%;
    left: 5%;
}

Answer 5

Fixed elements take only absolute values as width. If your parent container is fluid (width is a percentage), you need to set the width of the fixed element dynamically. You need to get the width of the wrapping container and set it on the sticky element.

CSS

.outer {width: 25%;}
.inner {position: fixed;}

JS

var fixedWidth = $('.outer').css('width');
$('.inner').css('width', fixedWidth);

Additionally, you can add an event listener in case window resizes.

JS

window.addEventListener('resize', resize);
function resize() {
    var fixedWidth = $('.outer').css('width');
    $('.inner').css('width', fixedWidth);
}

Answer 6

position: fixed is always relative to the window/browser, thus it cannot be used to solve your problem. Fixed positioning removes the element from the natural order of the DOM, and thus does not remain within your outer div anymore, hence why it takes the full width of the browser and not of your container. What you need to use is position: absolute to place .inner relative to .outer. You'll be able to position your element as well as have its width be contained by the .outer div.