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.