CSS Layout How to - Make three column layout with footer stick to content

Question

We would like to know how to make three column layout with footer stick to content.
Answer


<!DOCTYPE html>
<html>
<head>
<script type='text/javascript'
  src='http://code.jquery.com/jquery-1.7.1.js'></script>
<style type='text/css'>
#container {<!--   w  w w.jav a2  s .co m-->
  margin: 0 auto;
}

#container .column {
  position: relative;
}

#center {
  min-width: 400px;
  max-width: 800px;
  margin-left: 200px;
  margin-right: 200px;
  background: #DDD;
}

#left {
  float: left;
  width: 200px;
}

#right {
  float: right;
  width: 200px;
}

#footer {
  clear: both;
}
/*** IE6 Fix ***/
* html #left {
  left: 200px;
}
body {
  margin: 0;
  padding: 0;
}

#header, #footer {
  width: 100%;
  font-size: large;
  text-align: center;
  padding: 0.3em 0;
  background: #999;
}

#left {
  background: #66F;
}

#right {
  background: #F66;
}

#container .column {
  padding-top: 1em;
  text-align: justify;
}
</style>
</head>
<body>
<html>
<head></head>
<body>
  <div id="header">This is the header.</div>
  <div id="container">
    <div id="right" class="column">
      <h2>This is the right sidebar.</h2>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed
        diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam
        erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci
        tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo
        consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate
        velit esse molestie consequat, vel illum dolore eu feugiat nulla
        facilisis at vero eros et accumsan et iusto odio dignissim qui
        blandit praesent luptatum zzril delenit augue duis dolore te feugait
        nulla.</p>
    </div>
    <div id="left" class="column">
      <h2>This is the left sidebar.</h2>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed
        diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam
        erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci
        tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo
        consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate
        velit esse molestie consequat, vel illum dolore eu feugiat nulla
        facilisis at vero eros et accumsan et iusto odio dignissim qui
        blandit praesent luptatum zzril delenit augue duis dolore te feugait
        nulla.</p>
    </div>
    <div id="center" class="column">
      <h1>This is the main content.</h1>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed
        diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam
        erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci
        tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo
        consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate
        velit esse molestie consequat, vel illum dolore eu feugiat nulla
        facilisis at vero eros et accumsan et iusto odio dignissim qui
        blandit praesent luptatum zzril delenit augue duis dolore te feugait
        nulla.</p>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed
        diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam
        erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci
        tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo
        consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate
        velit esse molestie consequat, vel illum dolore eu feugiat nulla
        facilisis at vero eros et accumsan et iusto odio dignissim qui
        blandit praesent luptatum zzril delenit augue duis dolore te feugait
        nulla.</p>
    </div>
  </div>
  <div id="footer">This is the footer.</div>
</body>
</html>
The code above is rendered as follows: