Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CSS: how to position element in lower right?

Tags:

css

I am trying to position the text element "Bet 5 days ago" in the lower right-hand corner. How can I accomplish this? And, more importantly, please explain so I can conquer CSS!

alt text

like image 661
keruilin Avatar asked Oct 18 '10 01:10

keruilin


People also ask

How do you align an element to the bottom right?

Try this, setting your outer div to position: relative; ensure that the inner div will stay inside it when set to position: absolute; . Then you can specify it to sit in the bottom right corner by setting bottom: 0; right: 0; .

How do you position an element to the right in CSS?

If position: absolute; or position: fixed; - the right property sets the right edge of an element to a unit to the right of the right edge of its nearest positioned ancestor. If position: relative; - the right property sets the right edge of an element to a unit to the left/right of its normal position.

How do you position a div in the bottom right corner?

To place a div in bottom right corner of browser or iframe, we can use position:fixed along with right and bottom property value assigned to 0.

How do you position an element to the bottom in CSS?

Set the position of div at the bottom of its container can be done using bottom, and position property. Set position value to absolute and bottom value to zero to placed a div at the bottom of container.


2 Answers

Lets say your HTML looks something like this:

<div class="box">     <!-- stuff -->     <p class="bet_time">Bet 5 days ago</p> </div> 

Then, with CSS, you can make that text appear in the bottom right like so:

.box {     position:relative; } .bet_time {     position:absolute;     bottom:0;     right:0; } 

The way this works is that absolutely positioned elements are always positioned with respect to the first relatively positioned parent element, or the window. Because we set the box's position to relative, .bet_time positions its right edge to the right edge of .box and its bottom edge to the bottom edge of .box

like image 121
Austin Hyde Avatar answered Oct 18 '22 01:10

Austin Hyde


Set the CSS position: relative; on the box. This causes all absolute positions of objects inside to be relative to the corners of that box. Then set the following CSS on the "Bet 5 days ago" line:

position: absolute; bottom: 0; right: 0; 

If you need to space the text farther away from the edge, you could change 0 to 2px or similar.

like image 23
PleaseStand Avatar answered Oct 18 '22 02:10

PleaseStand