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?

I got a 404... probably because localhost isn't a valid TLD. — sdleihssirhc
– sdleihssirhc, Commented May 21, 2011 at 0:00

Brent Friar · Accepted Answer · 2011-05-21 01:42:14Z

4

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/

answered May 21, 2011 at 1:42

Brent Friar

10.6k2 gold badges22 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

PeeHaa Over a year ago

I wasn't thinking of clearing a <br>. rather clearing using another div which is already present. I have read th sites you metioned and they have valid points. Too bad it's such an ugly piece of code :( I will test it with some sites / browsers. And keep you updated.

Brent Friar Over a year ago

The <br> mention was more of a comment for Vap0r. The clearfix though you will find works very well and is simple to implement.

sdleihssirhc · Accepted Answer · 2011-05-21 00:11:10Z

3

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.

answered May 21, 2011 at 0:11

sdleihssirhc

42.6k6 gold badges56 silver badges67 bronze badges

Collectives™ on Stack Overflow

CSS overflow issue

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related