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!
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; .
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.
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.
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.
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
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With