title: Dynamically Resize DIV's using CSS
body: <p>I have an issue with dynamically resizing the height of my sidebar div to match the content div.
  Based on various other questions here and google searches, I thought that without a height set, it would use the parent div height, but it seems to auto-fit the height to the content instead.</p>
  
  <p>This can be seen on "baradineholdings.com.au" (please don't judge the site, I'm a noob for one and I would rather get the basics working properly before I make it 'pretty').</p>
  
  <p>The home page looks fine, mainly because of no content. If you head to the about page you can see the issue. I almost suspect that in the instance of the main page, the content div is taking the height of the sidebar div, but I'm not sure why.</p>
  
  <p><strong>HTML;</strong></p>
  
  <pre><code>&lt;body&gt;
      &lt;div id="wrapper"&gt;
          &lt;?php include('includes/header.php'); ?&gt;
          &lt;div id="internal"&gt;
              &lt;div id="sidebar"&gt;
                  &lt;h3&gt;Navigation&lt;/h3&gt;
                      &lt;li&gt;&lt;a href="index.php"&gt;Home&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="about.php"&gt;About&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="gallery.php"&gt;Gallery&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="contact.php"&gt;Contact&lt;/a&gt;&lt;/li&gt;
              &lt;/div&gt; &lt;!-- end #sidebar --&gt;
              &lt;div id="content"&gt;
                  &lt;p&gt;Images Coming Soon!&lt;/p&gt;
                  &lt;p&gt;Please see the about page for more information.&lt;/p&gt;
              &lt;/div&gt; &lt;!-- end #content --&gt;
          &lt;/div&gt; &lt;!-- end #internal --&gt;
          &lt;?php include('includes/footer.php'); ?&gt;
      &lt;/div&gt; &lt;!-- end #wrapper --&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p><strong>CSS;</strong></p>
  
  <pre><code>body {
  background-color: #f1f1f1;
  font-family: georgia,sans-serif;
  color: #333;
  margin: 0;
  padding: 0;
  }
  
  #wrapper {
  width: 960px;
  background-color: #f1f1f1;
  margin: 0 auto;
  border-left: 1px solid #ccc;
  border-right: 1px solid #ccc;
  }
  
  #internal
  {
  width: 959px;
  height: auto;
  background-color: #f1f1f1;
  margin: 0 auto;
  border-right: 1px solid #ccc;
  }
  
  #content {
  width: 675px;
  height: auto;
  float: left;
  padding: 10px;
  }
  
  #sidebar {
  width: 150px;
  /* height: 410px; */
  float: left;
  background-color: #27408B;
  color: white;
  }
  
  #sidebar a {
  text-decoration: none;
  color: white;
  }
  
  #sidebar li {
  list-style: none;
  }
  </code></pre>
  
  <p>As I said; noob. So I'm probably doing something dumb here...
  I've tried jsfiddle, but even using the large amount of content in the about page, it renders it small, so it doesn't affect the sidebar...
  I've tested in Chrome and IE, both have the same issue.</p>