title: <nav> and <section> elements inside "container" div --- container disappears unless specific height in px is stated
body: <p>I'm a complete html/css newbie and I'm making my first site. I want it to look something like this:</p>
  
  <p><a href="http://www.dorishochscheid.nl/" rel="nofollow">http://www.dorishochscheid.nl/</a></p>
  
  <p>I used a div element to "contain" the navigation bar and the main content, like this:</p>
  
  <pre><code>&lt;div id = "container"&gt;
  &lt;nav&gt; ... working navigation bar here ... &lt;/nav&gt;
  &lt;section id = "content"&gt; ... main content here ... &lt;/section&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>This is my css:</p>
  
  <pre><code>body {
  background-image: url(images/achtergrond.jpg);
  background-repeat: no-repeat;
  background-position: bottom center;
  margin: 0;
  }
  
  #container {
  margin: 0 auto 0;
  margin-bottom: 200px;
  width: 800px;
  height: 1000px;
  background-color: #de59b2;
  opacity:0.85;
  /* voor slechte browsers */
  filter: alpha(opacity=85);
  }
  
  #content {
  float: left;
  background-color: #de59b2;
  margin: 15px 45px;
  }
  </code></pre>
  
  <p>The navigation bar, the content section and the container all have the same opaque background color. </p>
  
  <p>The problem is this: I want the container div to grow in height according to how much content is placed in the content section. But if I remove the height = 1000px; the whole container disappears from sight. Seperate colored boxes for the navigation bar and main section remain. </p>
  
  <p>Why does this happen?? I've seen things like height = 100%; being used, but that doesn't work here either. I can imagine such a statement being what I'm looking for, seeing how I want the container to grow with the content section. </p>
  
  <p>Why does this happen and how do I get the container to size up or down depending on the amount of content in the content section that it contains?</p>
  
  <p>Or is this totally the wrong way to go about this type of contruction?</p>