CODEWITHSUNDEEP
css
john2x
john2x

Reputation: 23654

How to pin elements on the right?

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

Upvotes: 12

Views: 29919

Answers (7)

Geeklyrood
Geeklyrood

Reputation: 41

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/

Upvotes: 0

Kali Charan Rajput
Kali Charan Rajput

Reputation: 12626

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

Upvotes: 3

DisgruntledGoat
DisgruntledGoat

Reputation: 72560

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.

Upvotes: 2

Christopher Altman
Christopher Altman

Reputation: 4896

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.

Upvotes: 0

Matt Ball
Matt Ball

Reputation: 359966

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.

Upvotes: 18

GSto
GSto

Reputation: 42350

using the float property: 

float: right;

Upvotes: 0

dscher
dscher

Reputation: 1545

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

Upvotes: 3

Related Questions