title: position absolute within position relative not working correctly
body: <p>Ok so I'm aligning these two boxes to the bottom of the outer div by making the outer div position relative and the two inner boxes position absolute.</p>
  
  <p>Here is a fiddle of the problem:
  <a href="http://jsfiddle.net/QEr8L/" rel="nofollow">http://jsfiddle.net/QEr8L/</a></p>
  
  <pre><code>&lt;div id="graph-top-bar" class="clearfix"&gt;
          &lt;section class="brand clearfix"&gt;
              &lt;img src="images/calc-brand-img.png" alt="" class="hidden-sm"&gt;
              &lt;div class="content"&gt;
                  &lt;h1 class="brand-title"&gt;Brand R Bag&lt;/h1&gt;
                  &lt;h4&gt;Inverted Marking Paint&lt;/h4&gt;
                  &lt;select id="brand" name="brand"&gt;
                      &lt;option value="Brand R Bag" data-value="r-bag"&gt;BRAND R BAG&lt;/option&gt;
                      &lt;option value="Brand R Aerosol" data-value="r"&gt;BRAND R AEROSOL&lt;/option&gt;
                      &lt;option value="Brand A Aerosol" data-value="a"&gt;BRAND A AEROSOL&lt;/option&gt;
                      &lt;option value="Brand S Aerosol" data-value="s"&gt;BRAND S AEROSOL&lt;/option&gt;
                  &lt;/select&gt;
              &lt;/div&gt;
          &lt;/section&gt;
          &lt;section class="hidden-sm vs"&gt;
              &lt;img src="images/calc-vs.png" alt="VS"&gt;
          &lt;/section&gt;
          &lt;section class="krylon clearfix"&gt;
              &lt;div class="content"&gt;
                  &lt;h1 class="krylon-title"&gt;Krylon Industrial 17oz&lt;/h1&gt;
                  &lt;h4&gt;Inverted Marking Paint&lt;/h4&gt;
                  &lt;select id="krylon" name="krylon"&gt;
                      &lt;option value="Krylon Industrial 17oz" data-value="17"&gt;17oz&lt;/option&gt;
                      &lt;option value="Krylon Industrial 22oz" data-value="22"&gt;22oz&lt;/option&gt;
                  &lt;/select&gt;
              &lt;/div&gt;
              &lt;img src="images/calc-krylon-img.png" alt="" class="hidden-sm"&gt;
          &lt;/section&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>Here is the CSS:</p>
  
  <pre><code>#graph-top-bar {
      background: #474747;
      background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJod…EiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
      background: -moz-linear-gradient(top, #474747 0%, #000000 100%);
      background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#474747), color-stop(100%,#000000));
      background: -webkit-linear-gradient(top, #474747 0%,#000000 100%);
      background: -o-linear-gradient(top, #474747 0%,#000000 100%);
      background: -ms-linear-gradient(top, #474747 0%,#000000 100%);
      background: linear-gradient(to bottom, #474747 0%,#000000 100%);
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#474747', endColorstr='#000000',GradientType=0 );
      padding: 20px;
      position: relative;
  }
  #graph-top-bar .brand {
      width: 48%;
      position: absolute;
      float: left;
      bottom: 20px;
  }
  .hidden-sm {
      display: none;
  }
  #graph-top-bar h1 {
      font-style: italic;
      font-size: 150%;
      word-wrap: break-word;
  }
  #graph-top-bar h4 {
      font-weight: normal;
      font-size: 80%;
      margin-top: -5px;
  }
  #graph-top-bar select {
      margin: 0;
      -webkit-border-radius: 4px;
      -moz-border-radius: 4px;
      border-radius: 4px;
      background: #ffffff;
      background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJod…EiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
      background: -moz-linear-gradient(top, #ffffff 0%, #959595 100%);
      background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#959595));
      background: -webkit-linear-gradient(top, #ffffff 0%,#959595 100%);
      background: -o-linear-gradient(top, #ffffff 0%,#959595 100%);
      background: -ms-linear-gradient(top, #ffffff 0%,#959595 100%);
      background: linear-gradient(to bottom, #ffffff 0%,#959595 100%);
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#959595',GradientType=0 );
      border: 1px solid #000;
      font-size: 80%;
      padding: 6px;
      font-weight: bold;
  }
  #graph-top-bar .krylon {
      width: 48%;
      position: absolute;
      text-align: right;
      right: 0;
      bottom: 20px;
  }
  #graph-top-bar .krylon {
      text-align: right;
  }
  
  
  select {
      width: 100%;
      -moz-box-sizing: border-box;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      -moz-box-shadow: inset 0 0 7px #8c8c8c;
      -webkit-box-shadow: inset 0 0 7px #8c8c8c;
      box-shadow: inset 0 0 7px #8c8c8c;
      border: 1px solid #b3b3b3;
      background: #fff;
      color: #3b3b3b;
      display: inline-block;
      height: 35px;
      text-indent: 15px;
      line-height: 29px;
  }
  
  
  .clearfix:after {
       visibility: hidden;
       display: block;
       font-size: 0;
       content: " ";
       clear: both;
       height: 0;
  }
  .clearfix { display: inline-block; }
  /* start commented backslash hack \*/
  * html .clearfix { height: 1%; }
  .clearfix { display: block; }
  /* close commented backslash hack */
  </code></pre>
  
  <p>It's suppose to look like this:
  <a href="http://jsfiddle.net/4cKy2/" rel="nofollow">http://jsfiddle.net/4cKy2/</a></p>
  
  <p>But I need it positioned to the bottom for when the h1 tag starts to wrap on two lines and the other one doesn't.. it starts getting jagged. You can see it when you minimize your browser.</p>
  
  <p>Thanks for any help on this. I don't see why the text keeps going off the black background and the black background won't wrap around it..</p>
  
  <p>Thanks for any help!</p>