CSS: Making a div appear top right of the screen - css

Question

From the examples that I have seen this can be achieved by using
right: 0px;
top: 0px;
Or some variation of this. However when I do this, my div stays tight left of the screen. I need to start going into -1000px area to make it appear at the top right, which doesn't seem right.
Here is my HTML, and it is the div with the class "mysettings-menu" I am trying to place at the top right of the screen.
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>#Html.ActionLink(...)</li>
<li>#Html.ActionLink(...)</li>
<li>#Html.ActionLink(...)</li>
</ul>
<div class="mysettings-menu">
<ul>
<li>
Settings
<ul class="sub_menu">
<li>Log In</li>
<li>Add New Application</li>
</ul>
</li>
</ul>
</div>
</div>
As you can see I am using some default bootstrap classes, but even putting my div outside of these divs doesn't make a difference as it remains as close to the left side of the screen as it can get.
.mysettings-menu { position: relative; right: 0}

Answer 1

To put it on the top right,:
.mysettings-menu{
position: absolute;
right: 0px;
top:0px;
}
ie. Change the position to absolute.

Answer 2

First of all,
position: relative
means relative to the current position of the element. Combined with
right: 0
it certainly doesn't affect the positioning of your div.
What you want is
.settings-menu { position: absolute; right: 0; top: 0; } or .settings-menu { float: right; }
though both are different in some ways and similar in some other.

Answer 3

If you are using Bootstrap, then you can add the class pull-left. That basicalley add the propertie float: left !important to your div to make it float left (you can use it to the right too)

Answer 4

The majority of the position property is relative to the parent container.
If you want the div to be position to the top right of the its parent container you need to specify the position as absolute:
.mysettings-menu { position: absolute; top:0; right: 0; }
Alternate values for the position property are:
static (default)
relative
fixed
fixed is the only position property that does not position relative to its parent container, but positions relative to the window.
For example:
.mysettings-menu { position: fixed; top:0; right: 0; }
would set the div to be displayed in the very top right of the window regardless of where you scrolled to - it would always be visible.

Answer 5

jsfiddle demo
html
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav" style="display:inline-block">
<li>#Html.ActionLink(...)</li>
<li>#Html.ActionLink(...)</li>
<li>#Html.ActionLink(...)</li>
</ul>
<div class="mysettings-menu">
<ul>
<li>
Settings
<ul class="sub_menu">
<li>Log In</li>
<li>Add New Application</li>
</ul>
</li>
</ul>
</div>
</div>
css
.navbar-collapse{
border:1px solid red
}
.mysettings-menu{
border:1px solid blue;
display:inline-block;
position:absolute;
right: 10px;

Answer 6

What about this:
http://jsfiddle.net/lharby/zs15e48q/
CSS:
.nav {
float:left;
}
.mysettings-menu {
float:right;
}
As others have mentioned you could also use absolute positioning, but it depends if you want to change the flow of the document.
EDIT
As one answer points out (Yerko Palma) if you are using bootstrap you can add pull-left and pull-right classes to your elements, this is actually a better solution than writing new css for the existing elements.
Updated fiddle:
http://jsfiddle.net/lharby/zs15e48q/1/