Question

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:

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

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?

<div id="sbr_btn" >
        <div><a href='xx'>01</a></div>
        <div><a href='xx'>02</a></div>
        <div><a href='xx'>03</a></div>
        <div><a href='xx'>04</a></div>
        <div><a href='xx'>05</a></div>
        <div><a href='xx'>06</a></div>
        many more
        <div><a href='xx'>75</a></div>
</div>


#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;
}

Answer 1

Just use overflow:hidden on the containing div:

#sbr_btn {
    overflow:hidden;
}

JS Fiddle demo.