title: Div not resizing to fit image
body: <p>I have hardly written any HTML/CSS and am already encountering a problem. My header element is not automatically expanding it's height to wrap it's children. I've done a bunch of research and fooled around in the Developer Tools, but can't seem to put my finger on it. I'm sure it's really simple, but what is it I'm overlooking here?</p>
  
  <pre><code>&lt;!DOCYTPE html&gt;
  &lt;head&gt;
  &lt;title&gt;Page Title&lt;/title&gt;
  &lt;style&gt;
      header {
          width: 96%;
          height: auto;
          position: relative;
          margin: 1em auto;
          border: 1px solid gray;
          border-radius: 5px;
          padding: 1em;
          }
      section {
          width: 96%;
          position: relative;
          margin: 1em auto;
          border: 1px solid gray;
          border-radius: 5px;
          padding: 1em;
          }
      footer {
          width: 96%;
          position: relative;
          margin: 1em auto;
          border: 1px solid gray;
          border-radius: 5px;
          padding: 1em;
          }
      h1 {
          font-size: 2em;
          margin: 1em auto;
          }
      img {
          max-width: 100%;
          /* This tells the browser to set the image to the full-width of it's containing element. */
          }
      .group-icon {
          width: 10%;
          position: relative;
          float: left;
          margin: 0 1% 0 0;
          }
      .group-name {
          position: relative;
          float: left;
          }
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;header&gt;
      &lt;div class="group-icon"&gt;
          &lt;img src="images/sailing-icon.png"&gt;
      &lt;/div&gt;
      &lt;div class="group-name"&gt;
          &lt;h1&gt;Pirates in the Bay&lt;/h1&gt;
      &lt;/div&gt;
  &lt;/header&gt;
  &lt;section&gt;
      &lt;h2&gt;TEST&lt;/h2&gt;
  &lt;/section&gt;
  &lt;section&gt;
      &lt;h2&gt;TEST&lt;/h2&gt;
  &lt;/section&gt;
  &lt;footer&gt;&lt;/footer&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>