How to avoid empty clear divs?

Question

I have been using a lot of floats recently like this:

Answer 1

When you float items with CSS, they're removed from the natural flow state of the page.

If they're in a container DIV, that will shift the item out and have its parent not see where the child elements have gone. The container would then shrink back to boxing as much of the area as if the elements were not even there in the first place.

In order to cover for that, you have to specify overflow:hidden for the property of the container.

By default, it is set to visible and will allow anything to just "fall out" of the box if it has been floated as such.

Correct it by setting this in your CSS:

#buttons 
{
    overflow:hidden;
}

This will now constrain the floating elements to show within the context and confines of the parent DIV.