CSS

xHTML & CSS Layout with 100 percent height

Posted in CSS, XHTML on July 3rd, 2010 by Joonas – Be the first to comment

Creating a website layout with 100% height got tricky after someone said that you shouldn’t use tables anymore. All the browsers act differently and everything isn’t cookie cutter stuff anymore. Here is a quick little jump start for your next layout that you need to throw together. It is an xHTML and CSS layout built with divs and some CSS trickery. It features a header, navigation, content, sidebar, and footer.

View The Live Example

<!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" xml:lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>xHTML & CSS Layout with 100% height; includes, header, navigation, content, sidebar, and footer!</title>
        <style type="text/css">
 
        html,body { margin:0; padding:0; height:100%; background: #565656; }
 
        div#container {
            position: relative;
            margin: 0 auto;
            width: 980px;
            background: white;
            height: auto !important;
            height: 100%;
            min-height: 100%;
            border-left: solid 1px black;
            border-right: solid 1px black;
        }
 
        h1,h2 { margin: 0 0 15px 0; padding: 0; }
 
        div.clear { clear: both; height: 0; line-height: 0; font-size: 0; }
 
        div#header { border-bottom: solid 1px black; padding: 15px; background: gray; }
        div#navigation { padding: 5px; background: black; color: white; }
        div#content { padding: 15px 15px 100px 15px; }
        div#footer { position: absolute; width: 100%; bottom: 0; height: 100px; background: gray; border-top: solid 1px black; }
 
        div#content div#main { float: left; width: 735px; }
        div#content div#sidebar { float: right; width: 200px; }
 
        </style>
    </head>
    <body>
        <div id="container">
            <div id="header">
                <h1>xHTML & CSS Layout with 100% height</h1>
                <p>Includes: Header, Navigation, Content, Sidebar, and Footer</p>
            </div>
            <div id="navigation">
                Put links and what ever ever navigation elements you want here
            </div>
            <div id="content">
                <div id="main">
                    <h2>Lorem ipsum dolor sit amet, consectetur</h2>
                    <p>Nam placerat aliquam nulla ut imperdiet. Duis feugiat neque et neque suscipit bibendum lacinia libero gravida. Duis et eros in felis viverra mollis vel ut leo. Praesent in neque lectus, quis hendrerit dui. Nunc eu consequat neque. Nunc feugiat, velit et cursus ornare, magna libero aliquam nibh, a ullamcorper ante sapien nec lectus. Integer velit mauris, porttitor in semper nec, hendrerit et ante. Phasellus ante libero, hendrerit quis pretium et, aliquet sed nulla. Morbi id mauris at diam vulputate tristique. Aenean sed eros vel quam venenatis imperdiet nec mattis odio. Ut venenatis, sem eget adipiscing ultricies, lacus nibh imperdiet nisi, eu tincidunt velit dui nec tortor. Sed suscipit, dui id faucibus viverra, massa neque lacinia turpis, vel imperdiet orci sem ac orci. Ut et mauris velit, nec tristique nunc. Vestibulum in orci eget nulla commodo pulvinar eget eget nunc.</p>
                    <p><a href="http://dev.strategystar.net/2010/07/xhtml-css-layout-with-100-percent-height/" style="font-size:2em;">Return to the blog post</a></p>
                    <h2>Cras vitae neque libero, quis elementum sapien</h2>
                    <p>In sollicitudin lectus in ligula semper gravida. Sed erat felis, eleifend eget imperdiet a, luctus eu metus. Pellentesque at elit lacus. Donec consequat, tellus quis fringilla pellentesque, metus ipsum adipiscing tellus, nec sodales nisi felis nec mauris. Etiam at erat eget magna dictum sodales sed sollicitudin lorem. Quisque ornare iaculis neque, id bibendum orci elementum vitae. Ut nisl nunc, volutpat ac tincidunt eu, posuere non orci. Vestibulum fringilla ultrices eros, sit amet mollis sapien hendrerit sit amet. Curabitur dictum feugiat est. Nulla viverra mattis augue non sodales. Phasellus nec lectus vulputate nisi luctus scelerisque et id ligula. Suspendisse potenti.</p>
                </div>
                <div id="sidebar">
                    <h2>Sidebar</h2>
                    <p>All kinds of cool stuff can be placed here!</p>
                </div>
                <div class="clear"> </div>
            </div>
            <div id="footer">
                <p>Put your credits, copyright, and other stuff here. Remember to adjust the height to make it fit your needs.</p>
            </div>
        </div>
    </body>
</html>

You should probably separate the CSS from the example and put it in its own file, but I have kept it all in the HTML document for simplicity’s sake in this example. I hope somebody finds this useful.