How to avoid empty clear divs?

Question

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

<div id="buttons">
  <input type="button" id="btn1" value="Button One">
  <input type="button" id="btn2" value="Button Two">
  <input type="button" id="btn3" value="Button Three">
</div>

Sometimes I'll float a button to the right. Sometimes I'll float all of them to the right. This is where the problem starts. It really throws the flow off if I do that so I have to keep putting in these:

<div style="clear:both;"></div>

at the end. That throws off the layout if I'm not floating them all.

Is there a good solution to this?

Answer 1

Yes, use overflow: hidden on the container ie:

<style type="text/css">
#buttons { overflow: hidden; }
</style>

Answer 2

This is a big part of the CSS learning curve. When you float items, their containing element no longer takes the vertical height of the floated elements into account. There are a couple of solutions you could use to get around your dilemma.

Simply specify a hight for your #button container to the hight of your buttons:

#button { height: 30px; }

A fancier solution would be the clearfix hack. It's pretty bullet proof and will also do the trick without the need to add the extra markup and inline CSS.

#buttons:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

#buttons {
    display: inline-block;
}

html[xmlns] #buttons {
    display: block;
}

* html #buttons {
    height: 1%;
}

Answer 3

As long as you define the overflow of the parent, it will clear all floats.

Use overflow:auto on the parent, and your good to go!

http://www.sitepoint.com/blogs/2005/02/26/simple-clearing-of-floats/

(I have heard this works using display:inherit as well, but have not tried.)

Answer 4

Usually, the best options are the clearfix method or the method of setting 'overflow: hidden' on the containing parent.

In your specific example you do have another option: you could not float any of the inputs at all, and set 'text-align: right' on #buttons

#buttons {
    text-align: right;
    }

While I rely on 'overflow: hidden' quite a bit, it is worth noting that if you're trying to position any elements outside (or partially outside) of the containing element that has 'overflow: hidden' set on it, the positioned elements will be clipped off at the boundary of the containing element. (this doesn't come up too often, but is a "gotcha" to look out for.)

You might also find the blog post "Lessons Learned Concerning the Clearfix CSS Hack" by Jeff Starr interesting.

Answer 5

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 overflow: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.