title: CSS: Wrapper div collapsing when positioning children. Is there a better way?
body: <p>I'm trying to solve OK/CANCEL button placement for our internal app's.<br>
  We want the OK and Cancel buttons to be consistently placed (and styled).</p>
  
  <p>My thought was simply to drop our buttons in a button-wrapper, and then position them in relationship to that wrapper.</p>
  
  <p>The problem comes in, though, with how the wrapper collapses to 0 height when I the button are plucked with <code>position: absolute;</code>.<br>
  Because of this collapsed div, my buttons end up dangling.</p>
  
  <p>Example:</p>
  
  <pre><code>/*** css ***/
  section.blah{
      border: 1px solid #DDD;
      margin: 2em;
      padding: 1.5em 1em;
  }
  .button-wrapper{ 
      position:relative;
  }
  .button-wrapper .proceed{
      position:absolute;
      right:0;
  }
  .button-wrapper .cancel{
      position:absolute;
      left:0;
  }
  
  /*** html ***/
  &lt;section class="blah"&gt;
      &lt;div class="button-wrapper"&gt;
          &lt;button class="btn proceed"&gt;OK&lt;/button&gt;
          &lt;button class="btn cancel"&gt;Cancel&lt;/button&gt;
      &lt;/div&gt;
  &lt;/section&gt;
  </code></pre>
  
  <p>As you can see, we simply want the "OK" type buttons to be on one side, and the "Cancel" type buttons to be on the other. <br>
  Is <code>position:absolute;</code> the best way to do this?<br>
  If so, what would be an elegant way to ensure that my buttons don't dangle over other objects?</p>
  
  <p>(NOTE: I <em>thought</em> about just assigning a fixed height to the wrapper, but that seems entirely too in-flexible. The solution needs to allow buttons of any size.)</p>