Thursday, November 25, 2010

How to attach a full width footer to an absolute width wrapper

When you absolute position any object using CSS, the width: 100% may not work correctly in any browser. To workaround this problem we use the anchor solution. For example you want a layout in which the footer should expand to 100% width use the following CSS
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>How to attach a full width footer to an absolute width wrapper</title>
    <style type="text/css">
        html, body
        {
            height: 100%;
        }
        *
        {
            margin: 0;
            padding: 0;
        }
        .main
        {
            height: 0 auto;
            min-height: 100%;
        }
        .footer
        {
            position: absolute;
            bottom: 0; /*To anchor with bottom border of container*/
            left: 0; /*To anchor with left border of container*/
            right: 0; /*To anchor with right border of container*/
            background: BurlyWood;
        }
    </style>
</head>
<body>
    <div class="main">
        <div class="top">Top</div>
        <div class="content">Somecontent</div>
        <div class="footer">Footer Content With absolute position</div>
    </div>
</body>
</html>
and you are done You can apply this solution to any absolute position object
Posted by at 1 comment:
Subscribe to: Comments (Atom)