Having an issue with my CSS. The problem arises in a specific area of my screen where there are variable numbers of buttons enclosed within a DIV named sbr_btn. The layout is as follows:
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 occurs because the buttons have a float: left property, causing the outer DIV to not properly enclose the buttons. As a result, the layout does not look as intended. Is there a way to 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;
}