How to right align fixed position div inside a div

Question

My code is like this.

    
some text here
    

CSS:

Answer 1

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;
}

Answer 2

A bit hacky, but it works

.outer {
    width:200px;
    height:600px;
    background-color:red;
    margin:0 auto;
    direction: rtl; 
}
.inner {
    width:50px;
    border:1px solid white;
    direction: ltr;
}

Answer 3

If in case, you want to make the .inner element as a fixed positioned element and leave the other things inside .outer to be "scrollable", I suggest you to set the .inner position as an absolute positioned element. Then, create a new wrapper after it with overflow:auto:

<div class="outer">
  <div class="inner">Some text here...</div>
  <div class="flow">content</div> <!-- extra markup -->
</div>

Here's a demo: http://jsfiddle.net/tovic/ZLbqn/3/

Answer 4

I think this is what you want

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


.outer {
    margin: 0 auto;
    width: 860px;
    direction: rtl;
    background-color: black;
    height: 1200px;
}

.inner {
    float: right;
    position: fixed;
    text-align: center;
    width: 220px;
    background-color: red;
    height: 50px;
}

Answer 5

Following works for me.

<div style="position: relative;">
    <div id="overlay">
        overlay content
    </div>
</div>

<style>
#overlay {
    position: absolute;
    display: block;
    top: 0;
    right: 0;
    z-index: 3;
}
</style>

Answer 6

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