title: Make inner div match height of outer div
body: <p>So I am developing a little forum and I ran into a little design problem. The sidebar in each post is supposed to match the height of the content (the text written) but the sidebar only goes to the height necessary to display everything and then stops.</p>
  
  <p>JSFiddle: <a href="http://jsfiddle.net/9stPU/5/" rel="nofollow">http://jsfiddle.net/9stPU/5/</a></p>
  
  <p>CSS:</p>
  
  <pre><code>.forumContent {
  list-style-type: none;
  background: #34495e;
  letter-spacing: 1px;
  width: 1170px;
  margin: 0;
  color: white;
  }
  
  .forumContent li {
  padding: 0 0 0 10px; /* 5px 0 5px 10px */
  margin-left: -40px;
  min-height: 41px;
  overflow: auto;
  border-bottom: 1px solid #000;
  }
  
  .forumContent li:last-child {
  border-bottom: none;
  }
  
  .forumContent li h3 {
  margin: 0;
  padding: 0;
  font-size: 14px;
  }
  
  .forumContent li small {
  font-size: 9px;
  }
  
  .forumContent a {
  color: white;
  text-decoration: none;
  width: 100%;
  height: 100%;
  }
  
  .forumContent li:hover {
  background: #3E5368;
  }
  
  .forumContent a li {
  float: left;
  width: 366px;
  }
  
  .forumContent a li:first-child {
  width: 100px;
  }
  
  .forumContent li     .new b {
  font-size: 12px;
  }
  
  .forumContent li     .new {
  float: right;
  margin-right: 8px;
  margin-top: -2px;
  font-size: 9px;
  background: #2c3e50;
  padding: 4px;
  border-radius: 6px;
  }
  
  .topicUser {
  width: 150px;
  float: left;
  background: #000;
  margin-left: -10px;
  min-height: 100%;
  height: 100%;
  }
  
  .topicUser h3 {
  margin-left: 2    .5px !important;
  }
  
  .topicUser small {
  position: absolute;
  margin-top: -15px;
  margin-left: 7    .5px;
  }
  
  .topicUser p {
  margin-top: 2px;
  margin-left: 3px;
  }
  
  .topicContent {
  width: 1060px;
  float: right;
  height: 100%;
  }
  
  .topicContent p {
  padding: 5px;
  }
  </code></pre>