vertical align bottom + inline block

Question

I have the following HTML structure

<div class = "box">
  <div class="box1 item"></div>
  <div class="box2 item"></div>
  <div class="box3 item"></div>
  <div class="box4 item"></div>
</div>

box1 -> box4 has a display of inline-block.

.box {
   min-height: 403px;
}
.item { 
   display: inline-block;
   vertical-align: bottom;
   max-width: 20%;
}

For some reason, I cannot vertically align the divs with class "item" to the bottom of the box container. Does anyone know why?

Each element with class name item is part of a carousel that bleeds to the next page. Meaning each page shows 3.5 images.

Answer 1

vertical-align: bottom aligns inline-level elements to the bottom of their line box.

 .box { min-height: 403px; border: 1px solid blue; } .item { display: inline-block; vertical-align: bottom; border: 1px solid; } 

 <div class="box"> <div class="box1 item">1<br />1<br />1<br />1</div> <div class="box2 item">2<br />2<br />2</div> <div class="box3 item">3<br />3</div> <div class="box4 item">4</div> </div> 

If you want to align them to the bottom of the container, you need more advanced layouts, like CSS tables, or flexbox:

 .box { display: flex; align-items: flex-end; min-height: 403px; border: 1px solid blue; } .item { border: 1px solid; } 

 <div class="box"> <div class="box1 item">1<br />1<br />1<br />1</div> <div class="box2 item">2<br />2<br />2</div> <div class="box3 item">3<br />3</div> <div class="box4 item">4</div> </div> 

Answer 2

The solution of Oriol is the right one. But if you want to be save with old browsers, use table instead.

One solution could be:

<div class="wrapper">
  <div class = "box">
    <div class="box1 item">a</div>
    <div class="box2 item">s</div>
    <div class="box3 item">a</div>
    <div class="box4 item">p</div>
  </div>
</div>  

.wrapper {
  display: table;
  width: 100%;
  height: 403px;
}

.box {
  display: table-cell;
  vertical-align: bottom;
}

.item { 
   display: inline-block;
   vertical-align: bottom;
   max-width: 20%;
}