CSS Displaying element at the bottom of parent element

Question

I have a div that contains a background image that has a width of 100% and specified height.

I have a search ribbon that i want to appear aligned to the bottom of the image. I know i can do this with absolute positioning, but i try to avoid absolute where i can.

Here's a plunker: http://plnkr.co/edit/ur1Mu7nYifRTwb7dTEej?p=preview

Im trying to emulate like here: https://www.airbnb.com/

HTML:

<div class="bk-image">
    <section class="ribbon">
      <input type="text" placeholder="Name a city" class="city-name"/>
    </section>
  </div>

CSS:

.bk-image {
  background-image: url(http://gratisography.com/pictures/219_1.jpg);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  height: 600px;
  position: relative;
}

.ribbon {
  height: 90px;
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0.6);
    text-align: center;
}

.city-name {
  width: 200px;
  margin-top: 30px;
  padding: 10px;
}

Answer 1

You need to use position and bottom :

.ribbon {
    height: 90px;
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0.6);
    text-align: center;
    /* Add the following */
    bottom: 0;
    position: absolute;
    width: 100%;
}

Preview

Answer 2

I have a div that contains a background image that has a width of 100% and specified height.

Since all the heights are known, in this specific instance you can either add margin-top to the "ribbon" div of 510px (600px - 90px) or padding-top of 510px to the image div.

Margin Top Example

 * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .bk-image { background-image: url(http://gratisography.com/pictures/219_1.jpg); background-repeat: no-repeat; background-size: 100% 100%; height: 600px; position: relative; overflow: auto; } .ribbon { margin-top: 510px; height: 90px; background: none repeat scroll 0 0 rgba(0, 0, 0, 0.6); text-align: center; } .city-name { width: 200px; margin-top: 30px; padding: 10px; } 

 <div class="bk-image"> <section class="ribbon"> <input type="text" placeholder="Name a city" class="city-name" /> </section> </div> 

Jsfiddle Demo

Answer 3

If you don't want to use absolute positioning and there's a possibility that the parent's height could change over time, you can achieve this with flexbox . Set the display property of the parent element to flex and the align-items property to flex-end . You'll also need to give the child element a width of 100%. And don't forget to prefix the flexbox properties as necessary

 *{box-sizing:border-box;color:#000;font:arial;margin:0;padding:0;} .bk-image{ align-items:flex-end; background:url(http://gratisography.com/pictures/219_1.jpg) no-repeat; background-size:cover; display:flex; height:600px; } .ribbon{ background:rgba(0,0,0,.6); height:90px; padding:30px; width:100%; } .city-name{ background:rgba(255,255,255,.95); border:0; display:block; height:30px; line-height:30px; margin:0 auto; padding:0 10px; width:100%; max-width:200px; } 

 <div class="bk-image"> <section class="ribbon"> <input type="text" placeholder="Name a city" class="city-name"> </section> </div> 

---

Or, as Paulie_D pointed out in the comments, if you set the flex-direction to column , you don't need to set the width of the child element.

 *{box-sizing:border-box;color:#000;font:arial;margin:0;padding:0;} .bk-image{ background:url(http://gratisography.com/pictures/219_1.jpg) no-repeat; background-size:cover; display:flex; flex-direction:column; justify-content:flex-end; height:600px; } .ribbon{ background:rgba(0,0,0,.6); height:90px; padding:30px; } .city-name{ background:rgba(255,255,255,.95); border:0; display:block; height:30px; line-height:30px; margin:0 auto; padding:0 10px; width:100%; max-width:200px; } 

 <div class="bk-image"> <section class="ribbon"> <input type="text" placeholder="Name a city" class="city-name"> </section> </div>