1

I have a DIV inside a regular Bootstrap Jumbotron...

<div class="jumbotron vertical-align">
   <div class="container">
      Content here
   </div>
</div>

which I am aligning to the bottom using this...

.vertical-align
{
  display:0;
  display:flex;
  -webkit-align-items:flex-end;
  align-items:flex-end;
}

This works great everywhere but fails in IE9 where the DIV is aligned to the top. I understand Flex does not work in IE9 but need another quick solution.

Any way I can do this a different way to get it working cross browser?

Siguza
  • 21,155
  • 6
  • 52
  • 89
lowercase
  • 1,198
  • 9
  • 34
  • 56

2 Answers2

2

You can use CSS tables:

.vertical-align {
  display: table;
  height: 100px;
  border: 1px solid;
}
.container {
  display: table-cell;
  vertical-align: bottom;
}
<div class="jumbotron vertical-align">
  <div class="container">
    Content here
  </div>
</div>
Oriol
  • 274,082
  • 63
  • 437
  • 513
0

Look at my answer to this question which I just posted a few minutes ago. Flex doesn't work on IE 9.

How can I align 2 or more "row" divs to the bottom of a div, without using any kind of "absolute" positioning? Needs IE9+ support

Edit: Link content in case link changes.

If you can use jQuery, then this solution works. Here is a fiddle: https://jsfiddle.net/o47xeze7/3/

HTML

<div class="parent">
    <div class="bottom">
        <div class="child">abcdfg</div>
        <div class="child">abcdfg</div>
    </div>
</div>

CSS

.parent {
    width: 100%;
    height: 20rem;
    border: 1px solid black;
    display: block;
}

.child {
    border: 1px solid red;
    display: block;
}

.bottom {
    display: block;
    position: relative;
}

jQuery

$(function() {
    var parentHeight = $(".parent").height();
    var bottomHeight = $(".bottom").height();
    var difference = parentHeight - bottomHeight;

    $(".bottom").css("margin-top", difference);
});
Community
  • 1
  • 1
9997
  • 1,187
  • 1
  • 9
  • 14
  • While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. – John Bupit Aug 20 '15 at 22:21
  • @JohnBupit thanks, I've updated my post with the content of the other answer. – 9997 Aug 20 '15 at 22:23