title: How can I make my DIV fully enclose floating DIV's inside it?
body: <p>I am having a problem with my CSS. I have an area on my screen where there
  are buttons. The number of buttons is variable. These buttons are enclosed 
  inside of a DIV (sbr_btn). Something like this:</p>
  
  <pre><code>Outer DIV Outer DIV Outer DIV
  
   01  02  03  04  05
   06  07  08  ...
   71  72  73  74  75
  
  Outer DIV Outer DIV Outer DIV
  </code></pre>
  
  <p>The problem is that because my buttons have float: left then the outer DIV 
  does not enclose the buttons. It just ignores the height of all the buttons
  and does not look like above. Is there some way that I can make the outer
  DIV enclose the floating buttons?</p>
  
  <pre><code>&lt;div id="sbr_btn" &gt;
          &lt;div&gt;&lt;a href='xx'&gt;01&lt;/a&gt;&lt;/div&gt;
          &lt;div&gt;&lt;a href='xx'&gt;02&lt;/a&gt;&lt;/div&gt;
          &lt;div&gt;&lt;a href='xx'&gt;03&lt;/a&gt;&lt;/div&gt;
          &lt;div&gt;&lt;a href='xx'&gt;04&lt;/a&gt;&lt;/div&gt;
          &lt;div&gt;&lt;a href='xx'&gt;05&lt;/a&gt;&lt;/div&gt;
          &lt;div&gt;&lt;a href='xx'&gt;06&lt;/a&gt;&lt;/div&gt;
          many more
          &lt;div&gt;&lt;a href='xx'&gt;75&lt;/a&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  
  #sbr_btn div {
      float: left;
      padding: 4px;
      text-align: center;
  }
  #sbr_btn div a {
      display: inline-block;
      padding: 1px 4px;
      border: 1px solid #CCCCCC;
      border-radius: 4px 4px 4px 4px;
      color: #111111;
  }
  </code></pre>