Stick <p> to right bottom of <div>

[fodoxorg]

How to stick “readmore” on my website to right bottom corner of “row blog-items”? I have tried to use position: absolute; / position: relative; but I think it is not my case as “readmore” is not in own

.readmore {
	position: absolute;
	bottom: -100px;
	right: 0px;
}
.blog .blog-items {
	background: #F8F8F8;
	padding-top: 0px;
position: relative;
	bottom: 0;
	left: 0;
	/*color: #ffffff;*/
}

[SamA74]

Generally absolute positioning is a bad way to force a layout.
Adding text-align: right will put the link to the right of the container.
But to get it to the bottom of row blog-items you will have to alter the structure.
readmore is a child of the col-sm-6 which does not reach tot he bottom, it needs to be a direct child of row blog-items after the col-sm-6.

[coothead]

Hi there fodoxorg,

further to @SamA74’s suggesion, play around with this…

.readmore {
    padding-top: 10%; /* adjust value to suit */
    text-align:right;
 }

coothead

[PaulOB]

Hi,

If you use flex you can do it quite easily assuming you meant you wanted the text at the bottom of the whole row and not just below the paragraph text.

e.g.

@media screen and (min-width:768px){
p.readmore{text-align:right;margin-top:auto;}
.blog .blog-items{display:flex;}
.blog .blog-items > div {display:flex;flex-direction:column;}
}

[fodoxorg]

@PaulOB

}

Thank you!