Fluid width fixed position

Question

Imagine:

<div class="outer">
    <div class="inner">
    </div>
</div>

Where:

• .outer is part of a column structure, and its width is a percentile and therefore fluid.
• .inner represents a fixed position element that should fill with a 100% width the .outer element. However its position vertically remains the same, therefore fixed.

I’ve tried to implement this layout with the following CSS:

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

However, .inner does not calculate its width as a percentage of its relative parent. Instead it fills the full width of the window/document. Attempting any left or right properties result in the same parent-ignoring qualities.

Is there any way around this?

Answer 1

You can take a look at this jsfiddle that i made that illustrates the fix for your problem, you can use this code exactly as it does what you want.