Irma Irma - 10 months ago 56
HTML Question

CSS positioning at the bottom without absolute positioning

How can I position an element so it is always on the bottom of the container without using 'absolute' positioning?
I have a container containing 2 elements and one of them is text description so it can be as big as the text is. I would like to position second element at the bottom of the page regardless if the text in previous div is empty, and If text isn't empty I want to have padding of 10px between them

Answer Source

Updated: JSFiddle with flexbox applied to your code.

flexbox can help you achieve this. Add the following to your parent container.

.container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;

The next bit is for the 10px padding you wanted. This will target the first child element inside the container.

.child:first-child {
  padding-bottom: 10px;

As long as the first child div is present, even if you don't have any content (no paragraphs), the second div will still be pushed to the bottom of the container thanks to flexbox. Likewise, you can comment out the height property to verify that the padding is present between the two child elements.

Check out the JSFiddle below. You can adjust the height in the parent container to confirm that the second div stays at the bottom of the container.

Note: this solution will assume you will only have two child elements inside this particular parent container.

I hope this helps!