Search code examples
csshtmlfooter

How to increase height of footer's div when browser window is resized?

If browser width is 1024 - everything is OK, but when I resize it to 600px - footer's background does not expand vertically and "Need help" and "Join us" sections which went below does not have a background color... How to increase footer's height automatically if resizing happens?

Currently it looks this way (I did "select ALL" on the page to show white text) actual result

But I want footer height to expand to look like this: desired result

Thanks in advance.

CSS

.footer {
    color: white;
    height: 200px;
    background-color: #536571;  
    font-size: 18px;            
}


.about, .contacts, .help, .join {
    float: left;
    margin-top: 15px;   
    margin-left: 50px;
}

.about {
    margin-left: 100px;

}

.join {
    max-width: 300px;   

}

.copyright {
clear: both;
float: right;
margin-right: 20px; 
}

.footer ul p {
    font-size: 24px;
    font-weight: bold;
}

.footer ul {
    list-style: none;
}

HTML

<div class="footer">        
    <div class="about">
        <ul>
            <p>About</p>            
            <li>Team</li>
        </ul>
    </div>

    <div class="contacts">
        <ul>
            <p>Contacts</p>         
            <li>[email protected]</li>
        </ul>
    </div>

    <div class="help">
        <ul>
            <p>Need help?</p>           
            <li>FAQ</li>
        </ul>
    </div>

    <div class="join">
        <ul>
            <p>Join us!</p>         
            <li>
                Subscribe now and get a discount to our premium plan!
            </li>
        </ul>
    </div>

<div class="copyright">(C) 2013 My Company</div>

</div>
Solution

  • The problem stems from the fact that floats are not contained by the footer. Try the following;

    .footer {
    /* height: 200px; removed to allow the footer to stretch */
    overflow: hidden; /* a nice trick to contain floats */
}

    http://jsfiddle.net/Hk26d/