title: bootstrap panel overlaps floats
body: <p>I have a simple side panel that floats to the left and a main container that is a bootstrap "panel". The bootstrap panel's borders overlap into my side-panel.</p>
  
  <p><img src="https://i.imgur.com/HSKYJaa.png" alt=""></p>
  
  <p><a href="http://fiddlesalad.com/jade/bootstrap-panel-float/" rel="nofollow noreferrer">http://fiddlesalad.com/jade/bootstrap-panel-float/</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="false" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>aside { width: 100px; float: left; }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" /&gt;
  &lt;aside&gt;lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem&lt;/aside&gt;
  &lt;div class="panel panel-default panel-group container-fluid"&gt;
    &lt;div class="panel panel-default"&gt;ipsum ipsum ipsum ipsum ipsum ipsum ipsum ipsum&lt;/div&gt;
    &lt;div class="panel panel-default"&gt;ipsum ipsum ipsum ipsum ipsum ipsum ipsum ipsum&lt;/div&gt;
    &lt;div class="panel panel-default"&gt;ipsum ipsum ipsum ipsum ipsum ipsum ipsum ipsum&lt;/div&gt;
    &lt;div class="panel panel-default"&gt;ipsum ipsum ipsum ipsum ipsum ipsum ipsum ipsum&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>How to make them separated so they don't overlap?</p>