title: Bootstrap panel-footer with button pull-right
body: <p>I have the following HTML element with bootstrap:</p>
  
  <pre><code> &lt;div class="panel-footer"&gt;
                              &lt;button type="button" id="btnSave" class="btn btn-default pull-right"&gt;Save&lt;/button&gt;
                          &lt;/div&gt;
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/gbxow.png" rel="noreferrer"><img src="https://i.stack.imgur.com/gbxow.png" alt="enter image description here"></a></p>
  
  <p>If you see there is a gray area (<code>panel-footer</code>):
  <a href="https://i.stack.imgur.com/p1usr.png" rel="noreferrer"><img src="https://i.stack.imgur.com/p1usr.png" alt="enter image description here"></a></p>
  
  <p>The button uses <code>pull-right</code> class also that is <code>float:right</code>, but I would like the gray area that is actually the <code>panel-footer</code> <code>div</code> to fit within the button height.</p>
  
  <p>This is the styles for <code>panel-footer</code>:</p>
  
  <p><a href="https://i.stack.imgur.com/XPueY.png" rel="noreferrer"><img src="https://i.stack.imgur.com/XPueY.png" alt="enter image description here"></a></p>
  
  <p>And this for the <code>pull-right</code>:</p>
  
  <p><a href="https://i.stack.imgur.com/9qW20.png" rel="noreferrer"><img src="https://i.stack.imgur.com/9qW20.png" alt="enter image description here"></a></p>
  
  <blockquote>
    <p>Any clue?</p>
  </blockquote>
  
  <p>UPDATE:</p>
  
  <p>I added after the button:</p>
  
  <pre><code>&lt;div class="clearfix"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>And seems that fixed the problem. Is that ok?</p>