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

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

Answer 2

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 3

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 4

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 5

display: flex;
height: 10%;
width: 100%;
background-color: #111111;
color: #FFFFFF;
text-align: center;
font-size: .85rem; 

If you place your #footer at the bottom of your html and use Flex Box it will automatically stick to the bottom of the content. You need to also make your other divs for your content display: flex; as well.

Here is a link to Flexbox. It is such a good tool.

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 6

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.