Layout aligned to bottom of page

Hi folks,
I’ve got a CSS dilemma that has been bugging me for the last day, I’m trying to create a layout with a header at the top and the content at the bottom, expanding upwards.

Probably easier to explain with a picture… so here it is: http://tehjunk.com/layout.gif

The outline is the browser view, header is the header, footer is the footer which should be at the bottom of the browser view or the bottom of the content (whichever is lowest), the content should sit just above the footer and expand upwards to fit the content, if that’s not enough it should push the footer down.

So far I’ve tried:

html, body{
margin: 0;
padding: 0;
height: 100%;
}

#wrapper {
position:relative;
min-height: 100%;
width: 100%;
}

#header {
/* no positioning stuff in here */
}

#content {
padding-bottom: 100px; /*equal to the height of the footer */
}

#footer {
position:absolute;
bottom:0;
height:100px;
}


<html>
<body>
<div id="wrapper">
<div id="header">header content here</div>
<div id="content">Content here</div>
<div id="footer">footer here</div>
</body>
</html>

This kind of works, in that the header is at the top, the footer is at the bottom of the viewport or content (whichever is further down), however the content sits just below the header, whereas I want it to sit just above the footer if it’s short.

Any help appreciated. This could be done in tables quite easily, but I want to avoid that if possible.

Thanks

Hi, Welcome to Sitepoint :slight_smile:

If you only want IE8+ support then you can do this easily like this:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
    margin:0;
    padding:0;
    height:100%;
}
#outer {
    width:920px;
    margin:auto;
    background:#fcf;
    display:table;
    height:100%;
}
#header {height:100%}
#content, #footer, #header {
    vertical-align:bottom;
    width:100%;
    display:table-row;
    padding:20px 0;
}
#content {background:#fcc;}
#footer{background:#f99}
#header {
    background:transparent;
    vertical-align:top;
    padding:0;
}
#header .inner {background:red;}
.inner {
    padding:10px;
    border-top:1px solid #000;
    border-bottom:1px solid #000;
}
</style>
</head>
<body>
<div id="outer">
    <div id="header">
        <div class="inner">
            <h1>Header</h1>
        </div>
    </div>
    <div id="content">
        <div class="inner">
            <p>content</p>
            <p>content</p>
            <p>content</p>
            <p>content</p>
        </div>
    </div>
    <div id="footer">
        <div class="inner">
            <p>footer</p>
        </div>
    </div>
</div>
</body>
</html>

You can do it for ie6 and 7 but only if you use a fixed height header and footer.

This example uses my sticky footer technique and a hack for ie6 and 7 to get the alignment. It’s not simple though and needs to be followed carefully. :slight_smile:

Hi,
Thanks for that, I’ll give the sticky footer a shot. :slight_smile: