3

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.

7
  • How is class bottom defined? Apr 23, 2016 at 17:13
  • 1
    "For some reason, I cannot vertically align the divs with class "bottom"" No elements at html at Question have className "bottom"? Apr 23, 2016 at 17:15
  • Please explain what layout you are trying to do. Looks like a typical XY Problem. Apr 23, 2016 at 17:19
  • 2
    Can it be height jsfiddle.net/rydbbzbh rather than min-height?
    – Stickers
    Apr 23, 2016 at 17:21
  • 1
    The problem with CSS flex boxis that it not yet working in all browsers (without considering IE9 lower versions). The best compatible way is to use Javascript/jQuery with it. you can also use with CSS something like position:absolute; bottom:0; left:0; in a container. Apr 23, 2016 at 17:30

2 Answers 2

4

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>

5
  • problem is I have 5 images in a carousel, and I don't want all the images to fit on the page. People can click next to see the remaining images Apr 23, 2016 at 17:21
  • 1
    @Jasmine But how is that related to the question or my answer? If it's not related, you can ask a new question.
    – Oriol
    Apr 23, 2016 at 17:24
  • CSS flex boxis that it not yet working in all browsers (without considering IE9 lower versions) Apr 23, 2016 at 17:35
  • @LoicTheAztec Flexbox is supported by 94.1% used browsers according to caniuse (adding vendor prefixes). If you want more support, there are CSS tables.
    – Oriol
    Apr 23, 2016 at 17:47
  • 1
    No need of tables, There is others ways with CSS than css flex box. But your solution is nice anyways… just saying. Apr 23, 2016 at 17:51
0

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%;
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.