Flexible HTML layout with footer positioned at bottom.

By Thomas

This html and css will produce a grid where the footer is positioned at the bottom of the viewport until page content extends the viewport. The footer will then follow after the content end.

HTML

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <title>Flex grid</title>
  </head>
  <body>
    <div id="mainframe">
      <div id="header">Your header</div>
      <div id="content">Your content</div>
      <div id="footer">Your footer</div>
    </div>
  </body>
</html>

CSS

  * {
    margin:0;
    padding:0;
    }
 
  html,
  body {
    height:100%;  /* Body fills the viewport */
    }
 
  body {
    font-size:62.5%;
    }
 
  div#mainframe {
    position:relative; /* The footer is positioned relatively to this container */
    min-height:100%; /* Mainframe expands to fill the body. */
    /* In IE change til height:100%. */
    }
 
  div#header {
    height:4em;
    }
 
  div#content {
    padding-bottom:4em; /* content container must have padding bottom,
    }                      equal to footers height or content will hide behind
                           the footer. */
 
  div#footer {
    position:absolute;
    bottom:0;
    left:0;
    width:100%;
    height:4em
    }

Tags: , , , , ,

This entry was posted on Tuesday, August 18th, 2009 at 11:53 and is filed under XHTML / JavaScript / CSS. You can follow any responses to this entry through the RSS 2.0 feed. Responses are currently closed, but you can trackback from your own site.

Comments are closed.