Home » Web » CSS » How to make a div/span at the bottom right of a div with CSS

How to make a div/span at the bottom right of a div with CSS

You need to set the parent container to relative. When the position is relative, everything that will be under the container with the position to absolute will be absolute to the relative parent.

.parent 
{ 
  position: relative; 
}

.child 
{ 
 position: absolute; 
 bottom: 0; 
 right:0;
}

From here, if you create a child inside the parent container, the child will be at the bottom of the parent.

<div class="parent">
<p>This is the parent container</p>
<br/><br/><br/>
<p>This is the parent container</p>
<br/><br/><br/>
<br/><br/><br/>
<span class="child">Last line at the bottom</span>

An absolute div (or any other element) relative to the first relative parent. In the case that no element has been marked something else than the static (like to relative) than the first element will be used which is the Html element.

cssBottomRight

You can see the result in action with JSFiddle here.

If you like my article, think to buy my annual book, professionally edited by a proofreader. directly from me or on Amazon. I also wrote a TypeScript book called Holistic TypeScript

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.