title: how do I give a div a responsive height
body: <p>I'm stating to learn responsive design, but there's one thing I can't seem to figure out, so far...</p>
  
  <p>Here's a working example: <a href="http://ericbrockmanwebsites.com/dev1/" rel="noreferrer">http://ericbrockmanwebsites.com/dev1/</a></p>
  
  <p>I'd like the div element (contactBg) with text inside of it to come down to the bottom of the image to the left. Obviously I can do that by defining the height in px, but then that height is maintained when the rest of the window resizes instead of being fluid.</p>
  
  <p>If there are any good articles out there you may know of that explains how to do this, that would be very helpful, thanks!</p>
  
  <p>Here's the mark up: </p>
  
  <pre><code>&lt;div class="row-fluid"&gt;
          &lt;div class="span10 offset1"&gt;
              &lt;div class="container-fluid"&gt;
                  &lt;div class="row-fluid"&gt;
                      &lt;div class="span5"&gt;
                          &lt;img src="images/logo.jpg" alt="logo" /&gt;
                          &lt;img src="images/store.jpg" alt="store" /&gt;
                      &lt;/div&gt;&lt;!-- /span5 --&gt;
                      &lt;div class="span7"&gt;
                          &lt;img src="images/portal.jpg" alt="portal"&gt;
                          &lt;div class="contactBg"&gt;
                              Administration: Emma Jane Julien&lt;br /&gt;
                              &lt;a href="mailto:ej@emmajulien.com"&gt;ej@emmajulien.com&lt;/a&gt;
                          &lt;/div&gt;&lt;!-- /contactBg --&gt;
                      &lt;/div&gt;&lt;!-- /span7 --&gt;
                  &lt;/div&gt;&lt;!-- /row-fluid --&gt;
              &lt;/div&gt;&lt;!-- /container-fluid --&gt;
          &lt;/div&gt;&lt;!-- /span10 offset1 --&gt;
      &lt;/div&gt; &lt;!-- /row-fluid --&gt;
  </code></pre>
  
  <p>And here's the css:</p>
  
  <pre><code>   body {
          background: url(../images/3D2A1698A177AF9B71_218.png) repeat;
      }
  
      img {
          max-width:100%;
          padding-bottom:1%;
      }
  
       .container-fluid {
          background:#fff;
          padding: 1%;
      }
  
        .row-fluid {
          width: 100%;
          *zoom: 1;
   }
        .row-fluid [class*="span"] {
          display: block;
          float: left;
          width: 100%;
          min-height: 30px;
          margin-left: 1%;
          *margin-left: 2.709239449864817%;
          -webkit-box-sizing: border-box;
             -moz-box-sizing: border-box;
                  box-sizing: border-box;
  }
  
        .row-fluid .span10 {
          width: 82.87292817679558%;
          *width: 82.81973668743387%;
        }
  
        .row-fluid .span7 {
          width: 58.06353591160195%;
          *width: 57.12912895262725%;
        }
  
        .row-fluid .span5 {
          width: 40.93646408839753%;
          *width: 40.00205712942283%;
        }
        .row-fluid .span4 {
          width: 31.491712707182323%;
          *width: 31.43852121782062%;
        }
  
      .contactBg {
          background: #282624;
          padding: 3%;
          max-width:100%;
          height:auto;
      }
  </code></pre>