Align one div to the bottom of another

Question

I have several layers of div's with the initial one's setting up the background image (including setting the div size to screen size) etc and final one being some text. I want the text to then line up at the bottom of the div containing the background image. I'm using javascript to change the background image and the text every few seconds, so this is my HTML.

<section class="documentary" id='documentary'>
    <div class="documentary-bg">
        <div class="container">
            <div class="row">
                <div class="col-md-5 col-md-offset-7">
                    <div class='film-title' id="film1">
                       <h1>Flim 1 Title</h1>
                       <p>Text about film 1</p>
                    </div>
                    <div class='film-title' id="film2">
                      <h1>Film 2 Title</h1>
                      <p>Text about film 2.</p>
                    </div>
                    <div class='film-title' id="film3">
                       <h1>Film 3 Title</h1>
                       <p>Text about film 3.</p>
                       <a class="butt" data-toggle="modal" data-target="#myModal" id="modal-button">View Trailer</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

And here is the CSS for the relevant divs.

.documentary {
    background: url(../img/film1.jpg) no-repeat top center rgb(255,255,255);
    background-attachment: fixed;
    background-position: 0%;
    background-size: 100%;
    color: #fff;
    -webkit-transition-property: background-image 300ms ease-in 200ms;
    -moz-transition-property: background-image 300ms ease-in 200ms;
    -o-transition-property: background-image 300ms ease-in 200ms;
    transition: background-image 300ms ease-in 200ms;
}

.documentary-bg {
    padding: 0 0;
    background: -webkit-linear-gradient(bottom, rgb(191, 191, 191), rgba(191, 191, 191, 0.7)); /*Safari 5.1-6*/
    background: -o-linear-gradient(top, rgb(191, 191, 191), rgba(191, 191, 191, 0.7)); /*Opera 11.1-12*/
    background: -moz-linear-gradient(top, rgb(191, 191, 191), rgba(191, 191, 191, 0.7)); /*Fx 3.6-15*/
    background: linear-gradient(to top, rgb(191, 191, 191), rgba(191, 191, 191, 0.7)); /*Standard*/
    min-height:100vh;
    max-height: 100vh;
    display:table-cell;
    position:relative;
    vertical-align:bottom;
}

.film-title {
    display: inline-block;
}

In short I want to align .film-title to the bottom of .documentary-bg.

Everything I've read says to use {display: inline-block; vertical-align: bottom; } on the div where you want things to align at the bottom but that is justing causing the min-height to be overruled and causing a right mess.

Answer 1

What you googled for is for elements one next to other. In your case you have two solutions:

1. To set the row as position: relative;, than place your text with position: absolute; bottom: 0; right; 0;, or
2. To make the text same height as background image container and use display: table-cell, as you can see on this Fiddle, or in the snippet below.

.documentary {
    background: url(../img/film1.jpg) no-repeat top center rgb(255,255,255);
    background-attachment: fixed;
    background-position: 0%;
    background-size: 100%;
    color: #fff;
    -webkit-transition-property: background-image 300ms ease-in 200ms;
    -moz-transition-property: background-image 300ms ease-in 200ms;
    -o-transition-property: background-image 300ms ease-in 200ms;
    transition: background-image 300ms ease-in 200ms;
}

.documentary-bg {
    padding: 0 0;
    background: -webkit-linear-gradient(bottom, rgb(191, 191, 191), rgba(191, 191, 191, 0.7)); /*Safari 5.1-6*/
    background: -o-linear-gradient(top, rgb(191, 191, 191), rgba(191, 191, 191, 0.7)); /*Opera 11.1-12*/
    background: -moz-linear-gradient(top, rgb(191, 191, 191), rgba(191, 191, 191, 0.7)); /*Fx 3.6-15*/
    background: linear-gradient(to top, rgb(191, 191, 191), rgba(191, 191, 191, 0.7)); /*Standard*/
    min-height:100vh;
    max-height: 100vh;
    position:relative;
}
.documentary-bg div {
    height: 100vh;
    display: block;
    overflow: hidden;
}
.documentary-bg div.film-title {
    display: table-cell;
    vertical-align: bottom;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<section class="documentary" id='documentary'>
    <div class="documentary-bg">
        <div class="container">
            <div class="row">
                <div class="col-xs-5 col-xs-offset-7">
                    <div class='film-title' id="film1">
                       <h1>Flim 1 Title</h1>
                       <p>Text about film 1</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

Answer 2

Without having your other css and your images to play with it's going to be hard to determine where you're at, so I broke it down into simpler terms. In the example below you have one wrapper item that contains three relatively positioned divs. The key here is that they are position:relative. Items nested in a relatively positioned element can be positioned absolutely in relation to the parent element, so the paragraph tags inside the divs, can be positioned to the bottom accomplishing what you need. You should be able to apply that logic to your setup.

.wrapper {
  width: 100%;
}
div.item {
  width: 30%;
  border: 1px solid red;
  display: inline-block;
  height: 200px;
  position:relative;
}
div.item p {
  position: absolute;
  bottom: 0px;
  left: 5px;
}

<div class='wrapper'>
  <div class="item">
    <p>
      Item 1
    </p>
  </div>
  <div class="item">
    <p>
      Item 2
    </p>
  </div>
  <div class="item">
    <p>
      Item 3
    </p>
  </div>
</div>