CODEWITHSUNDEEP
htmlcss
user1240679
user1240679

Reputation: 6979

Make a div stick to bottom of parent

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!

Upvotes: 29

Views: 59244

Answers (2)

Irfan TahirKheli
Irfan TahirKheli

Reputation: 3662

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

Check it here. Fiddle

Upvotes: 47

user3034378
user3034378

Reputation: 89

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

Upvotes: 0

Related Questions