Search code examples
htmlcsscss-floatfooter

Footer floating to the bottom, good. But what about columns

I have code as such:

<div id="container">
    <div id="left-column">Floating left.</div>
    <div id="right-column">Floating right.</div>
</div>
<div id="footer">BlahBlah</div>

Container allows me to push the footer to the bottom of the page, but if I want the left and right column to span the height touching the footer, how can this be done?

Solution

  • You will need to set your page's html and body elements to 100% height. Then your columns will fill the page height if you also set them to 100%.

    The full CSS (including your own) is as follows. Background colour is used to illustrate layout.

    html, body {
    height:100%;
    padding:0;
}

#container {
    width:100%;
    height:100%;
    position:relative;
}

#footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    background-color: #FC0;
}

#left-column {
    background-color: #666;
    width :50%;
    float: left;
    height: 100%;
}

#right-column {
    background-color: #CCC;
    width: 50%;
    float: right;
    height: 100%;
}

    By setting padding to zero on the body you remove a horizontal scroll when the page is empty. Also be aware that by using absolute positioning for your footer it will overlap the content of the content columns.

    Here is a fiddle illustrating the layout - http://jsfiddle.net/BuKcH/