Geek Answers Handbook

How to arrange two divs one on top of the other at the bottom of the parent?

In this example, I was able to put two divs on top of each other at the bottom of my parent, but only because I knew the height of the last thing. The first was moved a little up. What if the height #secondis dynamic? How can we make them sit on top of each other below the parent with dynamic heights? Is this possible with css? Please do not post JavaScript or jQuery versions.

+4
source share
2 answers

You can use Flexbox. With justify-content: flex-endand, you can move the contents to the end of the parent element , so if you want to put another child on top of the parent, you can use margin-bottom: auto. This applies if you are setting flex-direction: columnfor the parent.

.content {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.main {
  margin-bottom: auto;
  border: 1px solid black;
}
.box {
  background: lightblue;
  margin: 5px;
}
<div class="content">
  <div class="main">Lorem ipsum dolor.</div>
  <div class="box">One</div>
  <div class="box">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati vel molestiae dolores, ad, nulla harum tenetur minima aperiam debitis id atque fugit, modi error et magni eius repellendus saepe. Vero?</div>
</div>
Run codeHide result
+4
source

You can wrap both of them in a div and set the absolute position style for that div, rather than applying them individually.

works [Fiddle] [1]

[1]: https://jsfiddle.net/gd5pqky7/
0
source

More articles:


All Articles