CSS overflow issue

Question

I use overflow: hidden on my site to get control over ending floats.

Which up to now always have worked perfectly.

I know there are several different approaches of ending floats but the overflow trick normally works best.

However this time I cannot get it right.

If you look at the following page and try to adjust the volume you'll see that the volume control goes under my header.

http://pieterhordijk.com/sandbox/html5-audio-api/mp3-format

The problem is in the #content-container div

When I remove the overflow the volume control goes over my header (which is what I want).

But I can't just drop the overflow or I have to result to another solution to control the floats, which is not something I want to do unless REALLY necessary.

Anybody has a solution to this problem?

Answer 1

You've already selected an answer, but there are some issues that should be pointed out. First, clearing a <br> is not semantic, it adds extra code and can cause issues in some browsers.

Next, you should not use the overflow method of clearing floats now that CSS3 is becoming more prevalent. It causes issues with any new parameters that display effects outside the boundaries of the container. At a minimum both box and text shadows will be cut off if you are using the overflow method.

You really should use the clearfix method. It's simple to implement, does not require any additional mark up, and does not cause issues with any CSS3 properties.

Good reading -

http://perishablepress.com/press/2009/12/06/new-clearfix-hack/

http://fordinteractive.com/2009/12/goodbye-overflow-clearing-hack/

Answer 2

You could give the snippets div clear:both. You have the element in there anyway, and I assume you wouldn't want it to wrap around the nav, so it's not just adding unsemantic elements/classes for the heck of it.