HenryM HenryM - 3 months ago 10
CSS Question

Align one div to the bottom of another

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

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>