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