How to avoid empty clear divs?

Question

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

Answer 1

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.