Home/ Questions/Q 8739601
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-13T10:58:11+00:00

I am having trouble getting my 2 columns layout renders correctly with a footer

  • 0

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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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

    • 0