title: Absolute element within relative parent with max-width
body: <p>I'm trying to position <code>#header-supporter</code> on the bottom right of <code>#header-image</code> (overlapping). The difficult part is doing so by setting a <code>max-width</code> of 1280px on <code>#header-supporter-cont</code> to make it consistent with the rest of the site margin.</p>
  
  <p>I've tried placing <code>#header-supporter</code> directly within <code>#header</code>, but then I can't use <code>max-width</code> because <code>#header-image</code> needs to be full-width.</p>
  
  <p>Here is my markup:</p>
  
  <pre><code>  &lt;header id="header"&gt;
      &lt;div id="header-image"&gt;
        &lt;a href="#"&gt;&lt;img src="http://placeholdit.imgix.net/~text?txtsize=44&amp;txt=Header&amp;w=1920&amp;h=200" /&gt;&lt;/a&gt;
      &lt;/div&gt;
      &lt;div id="header-supporter-cont"&gt;
        &lt;div id="header-supporter"&gt;
          &lt;div&gt;
            Lead Supporter
          &lt;/div&gt;
          &lt;img src="http://placeholdit.imgix.net/~text?txtsize=14&amp;w=65&amp;h=65" /&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/header&gt;
  </code></pre>
  
  <p>Here's a Pen: <a href="http://codepen.io/ourcore/pen/ObBWaY" rel="nofollow noreferrer">http://codepen.io/ourcore/pen/ObBWaY</a>.</p>