Taosique Taosique - 4 months ago 13
HTML Question

Align two overlapping divs to bottom of their parent

I'm struggling to align two divs to the bottom of their parent.


  • White (
    class="section"
    ) is parent div, it's 100% wide;

  • Gray (
    class="text"
    ) is 100% wide and can have random height depending on contents, it can have smaller height than white and orange, its bottom must be aligned with the bottom of white;

  • Orange (
    class="icon"
    ) has fixed width and height, its bottom must be aligned with the bottom of white and it should be pulled to the right (maybe with some offset from the right), the height of white must adapt to be not less than height of orange.



I tried different combinations of
vertical-align: bottom
,
position: absolute
and
float
but to no avail.

JSFiddle: https://jsfiddle.net/ca9we2jo/

What I want it to look like:

Layout

Answer

You can use css flex to achieve it as follows:

body {
  background-color: #333333;
  margin: 0;
}
.container {
  margin: 0 auto;
  width: 80%;
}
.section {
  background-color: #FFFFFF;
  min-height: 200px;
  margin-bottom: 100px;
  flex-direction: column-reverse;
  position: relative;
  display: flex;
  width: 100%;
}
.text {
  background-color: #999999;
  padding-right: 270px;
  height: 150px;
}
.tall {
  height: 300px;
}
.icon {
  width: 250px;
  height: 250px;
  background-color: #FF9933;
  border: #000000 2px dashed;
  z-index: 1;
  position: absolute;
  bottom: 0;
  right: 0;
}
<div class="container">
  <div class="section">
    <div class="text">
      <b>Case 1:</b>
      Gray has lower height than orange
    </div>
    <div class="icon">
    </div>
  </div>
  <div class="section">
    <div class="text tall">
      <b>Case 2:</b>
      Gray has bigger height than orange
    </div>
    <div class="icon">
    </div>
  </div>
</div>

Comments