CSS Text Align Bottom of Container

Question

I have a header which has a large image floated on one side, and a small paragraph of text on the other side. I want the paragraph to start at the bottom of the header div. If there were 5 lines in the paragraph, I want the last line to be at the bottom of the header. I'm having trouble getting the paragraph to align itself down there.

I have something like this:

<div id='header'>       <img id='logo' />       <p id='quote'></p>  </div> 

And the CSS is:

div#header {     height: 200px; }  div#header img#logo {     float: left; }  p#quote {     float: left; } 

Answer 1

http://jsfiddle.net/danheberden/ymwPe/

<div id="container">     <div id="gonnaBeOnTheBottom">         <p>Hi there!</p>         <p>I'm on the bottom!</p>     </div> </div> 

css:

#container {     background: #EEE;     height:400px;     width:400px;     position:relative; } #gonnaBeOnTheBottom {     position:absolute;     bottom:0; } 

by setting position:relative on the parent container, you can absolute position elements inside of it :)

Answer 2

A more modern approach would be the usage of flexbox, that vastly eases the responsive work afterwards:

• display:flex on the container
• flex-direction: column will distribute children from top to bottom
• margin-top: auto to the element that you want to stick at the bottom, flex will apply all the free space above

#container {   background: #eaeaea;   height:180px;   display: flex;   flex-direction: column; }  #bottom {   border: 1px solid blue;   margin-top: auto; }

<div id="container">     Whatever content     <div id="bottom">Will stick to bottom</div> </div>