CODEWITHSUNDEEP
css
user3407039
user3407039

Reputation: 1335

CSS: Making a div appear top right of the screen

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>
                            <a href="#">Settings</a>
                            <ul class="sub_menu">
                                <li><a href="#">Log In</a></li>
                                <li><a href="#">Add New Application</a></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}

Upvotes: 2

Views: 5745

Answers (6)

lharby
lharby

Reputation: 3265

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/

Upvotes: 0

kasper Taeymans
kasper Taeymans

Reputation: 7026

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>
                    <a href="#">Settings</a>
                    <ul class="sub_menu">
                        <li><a href="#">Log In</a></li>
                        <li><a href="#">Add New Application</a></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;

Upvotes: 0

user4524985
user4524985

Reputation:

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.

Upvotes: 1

Richard Parnaby-King
Richard Parnaby-King

Reputation: 14862

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.

Upvotes: 0

Yerko Palma
Yerko Palma

Reputation: 12329

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)

Upvotes: 0

Dhruv Ramani
Dhruv Ramani

Reputation: 2643

To put it on the top right,:

.mysettings-menu{
 position: absolute; 
 right: 0px;
 top:0px;
}

ie. Change the position to absolute.

Upvotes: 2

Related Questions