Make a div stick to bottom of parent

css, html

Solution

Add `position:relative` to your wraper class. Add `position:absolute;bottom:0;` to the stream-content class.

Check it here. Fiddle

Problem

I am trying to create a layout here which looks like the following: Here's the fiddle ``` <body> <div class="wrapper"> <div class="header"> Header </div> <div class="content"> This is the content section </div> <div class="stream-content"> This is the stream content. </div> <div class="push"> </div> </div> <div class="footer"> </div> <body> ``` I want the `content section` to take up the full space between the `header` and `footer` section. There is an additional section called [`stream-content`] which if there (will be there only on home page) has to take the position just before the `footer`. And in that case, the `content` section should take up space all the between `header` and `stream-content` section. I tried doing the same with absolute positioning but all my elements were going haywire, so wanted to understand the correct way of doing this. Thanks in advance for all help!

Original source