Question

I have the following:

XHTML:

<div id="container">
 // contents
</div>

CSS:

#container { margin: 0 auto; width: 940px; overflow: hidden; padding: 10px; border: 1px solid #CCCCCC; }

The div is centered on the page with margin: 0 auto and I use overflow: hidden to allow the DIV to automatically expand down to the height of its contents.

I have some content in the DIV which has a box-shadow on it. The problem is due to the overflow: hidden rule the shadow does not fully appear on the page. The only ways around this I have found:

1. Take out overflow: hidden – but then the container DIV doesn’t expand down.
2. Use height / min-height on #container – however this wont work well with all pages on the site.
3. Use float: left – but then the DIV isn’t centered on the page.

Anybody got any more suggestions for this?

Answer 1

You can use one of the many clearfix techniques. That will let you remove overflow:hidden and fix the cropped box-shadow.

Here’s a recent article on the topic: http://css-tricks.com/snippets/css/clear-fix/