Make a div stick to bottom of parent
I am trying to create a layout here in 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!
Add position:relative to your wraper class. Add position:absolute;bottom:0; to the stream-content class.
Check it here. Fiddle
If I understand correctly then one way to do it would be to put [steam content] outside the wrapper, as wrapper is the one that is keeping the footer at the bottom. If you must have the [steam content] inside wrapper than you can try something like this http://ryanfait.com/sticky-footer/ to keep it at the bottom together with the footer