This is a problem I ran into recently while working on a new website. How do you make a div extend the full length of the browser window? This used to be the domain of tables (yuck!), but CSS comes to save the day. Here’s the code:

html, body {
  /* We'll tell the browser to use the whole window to display our
      site, not just the space the content takes up. */
  height : 100%;
}

#wrapper {
  /* Now, we tell the div to be the full length of the window. */
  height : 100%;
}

I did run into a little snag. When the div is 100% of the window, setting a border(i.e. border : 1px solid #666;), bumps the div to be just a little too big, creating a vertical scroll bar. To fix this, only define the left and right borders(i.e. border-left : 1px solid #666; border-right : 1px solid #666;) This way, the top and bottom don’t have borders.