[CSS] How to pin elements on the right?

Question

How do I position elements to be aligned on the right edge of the window?

Answer 1

You can float them right like so:

float: right;

That depends on the elements around it but that would be the easiest way for sure.

Note that this won't work for ABSOLUTELY positioned items obviously. See this link for a lot more details: http://www.w3schools.com/css/pr_class_float.asp

Answer 2

using the float property:

float: right;

Answer 3

If you want to remove the element from the flow,

position: absolute;
right: 0;
top: /* whatever */;

but it's hard to answer your question with the "right" answer without more detail/context.

Answer 4

You can also use Absolutely Positioned elements

div{  
 position:absolute;
 z-index:1000;
 width:20px;
 height:20px;
 top:0;
 right:0;
}

This will pin the div to the right, top corner of the page. I use 1000 for z-index because it allows you to shim other z-indexes below it without having to alter this style.

Answer 5

If you want it pinned in the sense that it stays on the right of the viewport, even as you scroll the page, then you need to use fixed positioning, like this:

.pinned {  
    position: fixed;
    right: 0;
    top: 0;
    width: 50px;
    height: 50px;
}

Obviously change the top/width/height values to suit your purpose.

Answer 6

hi there is better way to use float:rightto make your elements in right side and if you want fix it ant dont want move this with scroll you can use this one

.element{  
 position:fixed;
 z-index:1000;
 height:30px;
 width:60px;
 right:0;
}

and also view this view this