Saturday, October 9, 2010

100% height layout using tables

If your ever wanted to make your footer appear attached to bottom of the browser even there was no data on the page. Well use the code below.

<html>
<head>
    <title>100% height using tables</title>
    <style type="text/css">
        * { margin0padding0; }
        htmlbodytable#maintable { height100%; }
        #maintable thead td { height23px; }
        #maintable tfoot td { height23px; }
    </style>
</head>
<body>
    <table id="maintable">
        <thead>
            <tr>
                <td><h1>Height is neccessary. Adjust the height accordingly</h1></td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td valign="top">Valign top makes the data be aligned at the top of this box</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>&copy; 2010 Company. Height is neccessary so keep it small</td>
            </tr>
        </tfoot>
    </table>
</body>
</html>

No comments:

Post a Comment