How to right align fixed position div inside a div

Question

My code is like this.

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

CSS:

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

The inner div, which is positioned left by default, needs to be positioned against the right w.r.t. the outer div and not to the page itself.

If I style it to be right:0px;, then it aligns 0px from the browser's right, not the outer div's right.

NOTE : My outer div is not fixed width; it adjust as per screen resolution. It's a responsive website design.

Answer 1

Two options. Simply float the inner div right or else use absolute positioning to achieve it.

For floating simply set float:right on the inner DIV and overflow:hidden on the outer DIV.

For absolute positioning simply set position:relative on the outer DIV and set position: absolute and right:0 top:0 on the inner DIV.

Answer 2

Why don't you use position:absolute

position:fixed always relative to the browser

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

DEMO

---

If it is compulsory to use position:fixed then you can assign the margin-left value, since you are using fixed with for both the divs.

.inner {
    width:50px;
    border:1px solid white;
    position:fixed; margin-left:150px
}

DEMO 2