How to right align fixed position div inside a div

You could use a container div:

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

Then use that to handle the float, and make its child position: fixed

.outer {
    width:50%;
    height:600px;
    background-color:red;
    margin:0 auto;
    position: relative;
}
.floatcontainer {
    float: right;
}
.inner {
    border:1px solid white;
    position:fixed;
}
.floatcontainer, .inner{
    width: 50px;
}

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


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.

Tags:

Html

Css