Taosique Taosique - 2 months ago 12x
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 (
    ) is parent div, it's 100% wide;

  • Gray (
    ) 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 (
    ) 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
but to no avail.

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

What I want it to look like:



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 class="icon">
  <div class="section">
    <div class="text tall">
      <b>Case 2:</b>
      Gray has bigger height than orange
    <div class="icon">