2 columns layout with a sticky footer

Question

I am having trouble getting my 2 columns layout renders correctly with a footer to stick to the bottom of the page. I have followed all the usual advice but my columns seems to expand beyond it's container div, which consequently pushes the footer off the bottom of the page.

my last attempt was to display the columns container as a table!!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <style>
            html, body{
                margin:0;
                height: 100%;
                padding: 0;
                border: 0;
                overflow:inherit; /* triggers 100% height in Opera 9.5 */   
                font-family: proxima-nova, 'Proxima Nova', gotham, 'helvetica neue', helvetica, arial, sans-serif, sans;
            }

            body{  
                background-color: burlywood;
            }

            #wrapper
            {
                background-color: #FFFFFF;
                min-height:100%; /* gives layout 100% height */
                width: 980px;
                margin:0 auto;
                margin-top: -105px; /* must equals the footer's height' */
            }

            * html #wrapper { 
                height:100%; /* IE6 treats height as min-height */
            }

            div.margin{
                width: 920px;  /* + 2*30(the padding) */
                margin-right:auto;
                margin-left:auto;
                padding: 0px 30px 0px 30px;
            }

            div.header{
                height: 60px; 
                background-color:cornflowerblue;
            }

            div.footer{
                position: relative;
                clear:both;
                height: 105px; 
                background-color:#4E8084;
            }

           div.body_content{
                display: table; 
                background-color: red;
                height: 100%;
            }

            div.leftSide{
                width:25%;
                background-color: #F4F4F4;
                display: table-cell; 
            }

            div.rightSide{
                width: 70%;
                padding: 20px;
                background-color: #e8e7e7;
                display: table-cell; 
            }
        </style>
    </head>
    <body>
        <div id="wrapper">
            <!-- Fixing wrapper div. the height must equal the footer's height-->
            <div style="height: 105px;"></div>

            <div class="header margin">
                Welcome
            </div>
            <div class="body_content" style="clear: both;">
                <div class="leftSide">
                    <h2>Settings</h2>
                    <a href="#" id="personalButton" class="current">Personal</a>
                    <a href="#" id="securityButton">Security</a>
                </div>
                <div class="rightSide">
                    <h3>Title</h3>
                    <a class="m-btn blue-stripe">Save Changes</a>
                </div>
            </div>
        </div><!-- end #wrapper -->
        <div class="footer margin" >
            <span class="footer_links">
                something
            </span>  
        </div>
    </body>
</html>

Answer 1

Solving this problem is some complex. It can be solved using display : table , display : table-row and display : table-cell . I would recommend you to use jquery like below when the document complete.

function resize () { 
       var h = $('#wrapper').outerHeight(true) - $('.header').outerHeight(true);
       $('.body_content').height(h);
}

JSFiddle

2 columns layout with a sticky footer

Question

1 answers

solution1
1 ACCPTED 2012-10-27 10:36:29

2 columns layout with a sticky footer

Question

1 answers

solution1 1 ACCPTED 2012-10-27 10:36:29

solution1
1 ACCPTED 2012-10-27 10:36:29