How can I make my DIV fully enclose floating DIV's inside it?

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

Informative previous question: http://stackoverflow.com/questions/218760/how-do-you-keep-parents-of-floated-elements-from-collapsing — CyberDude, Oct 12 '11 at 08:04

David Thomas · Accepted Answer · 2011-10-12T08:13:16.467

9

Just use overflow:hidden on the containing div:

#sbr_btn {
    overflow:hidden;
}

JS Fiddle demo.

edited Oct 12 '11 at 08:13

answered Oct 12 '11 at 08:04

David Thomas

249,100
51
377
410

score 2 · Answer 2 · answered Oct 12 '11 at 08:42

You could put an empty <div> at the end of the container with the clear: both; CSS style. I include one after my floated elements to force their container to enclose them.

<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 class="clearFix"></div>
</div>

.clearFix { clear: both; }

Also, simply setting the size of the container avoids the need for this solution.

How can I make my DIV fully enclose floating DIV's inside it?

2 Answers2