How to fix faux columns?

I've been given a relatively easy assignment in my Web development class and I'm having a problem with my layout and I cannot figure out why. Here is the code for my index page


<!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" lang="en" xml:lang="en">


<head>

  <title>Javajam Coffee House</title>

  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

  <link href="javajam.css" rel="stylesheet" type="text/css" />

</head>


<body>


  <div id="container">

  

   <div id="logo">

    <img src="javalogo.gif" width="100%" height="150" alt="JavaJam Coffee House" />

   </div>

   

    <div id="nav">

	  <ul>

	    <li><a href="index.html">Home</a></li>

	    <li><a href="menu.html">Menu</a></li>

	    <li><a href="music.html">Music</a></li>

	    <li><a href="jobs.html">Jobs</a></li>

      </ul>

    </div>

	  

      <div id="content">

	    <img src="windingroad.jpg" class="floatright" height="220" width="460" hspace="20" alt="Winding Road" />

	    <h3>Follow the winding road to JavaJam...</h3>

		

            <ul>

              <li>Specialty Coffee and Tea</li>

              <li>Bagels, Muffins and Organic Snacks</li>

              <li>Music and Poetry Readings</li>

              <li>Open Mic Night</li>

            </ul>

		  

        <h4>12312 Main Street<br />

         Mountain Home, CA 93923<br />

         1-888-555-5555

		</h4>

		 

		  <br />

      </div>

	  

    <div id="footer">

      Copyright © 2011 JavaJam Coffee House<br />

      <a href="chris@mouser.com">chris@mouser.com</a>

    </div>

	

  </div>

  

</body>

</html>

The website uses an external style sheet as well :


body { background-color: #ffffcc;

      color: #330000;

	  font-family: Verdana, Arial, sans-serif;

	  background-image: url(background.gif); 

}

h1 {   background-color: #ccaa66;

      color: #000000;

	  text-align: center;

}

h2 {   background-color: #ccaa66;

      font-size: 1.2em;

	  padding-left: 10px;

	  padding-bottom: 5px;

}

img {  border: 0;

}

#nav { text-align: center; 

      background-color: #f1e8b0;

      font-size: 1em;

	  float: left;

	  width: 150px;

	  height: 100%;

	  overflow: auto;

	  padding-top: 10px;

	  overflow: auto;

}

#footer { background-color: #ccaa66;

       color: #000000;

	   border-top: 2px double #000000;

	   padding-top: 20px;

	   padding-bottom: 20px;

       font-size: .60em;

	   font-style: italic;

	   text-align: center;

}

#container { 

       margin-left: auto;

       background-color: #e8d882;

	   color: #000000;

	   border: 2px double #000000;

	   min-width: 700px;

       margin-right: auto;

	   width: 80%;

}

#logo { background-color: #ccaa66;

       color: #000000;

	   text-align: center;

	   margin: 0;

	   border-bottom: 2px double #000000;

}

#content { 

       margin-left: 150px;

	   background-color: #e8d882;

	   color: #000000;

	   padding: 10px 20px;

	   overflow: auto;

}

#nav a { text-decoration: none;

       margin: 30px;

	   text-align: center;

	   display: block;

}

#nav  a:hover {

       color: #ff0000;

}

#nav ul {

       list-style-type: none;

}

.floatright { 

       padding-left: 20px;

	   float: right;

}

.details { padding-left: 20%;

       padding-right: 20%;

}

The problem here is (if you've opened the code in a broswer) the background color of the navigation column does not go all the way down to the bottom of the column. I can't figure out why this is happening. Some help here please? I've provided a screenshot of the problem below