CSS3's box-shadow issue

Question

As I'm developing my webpage, I found an issue using the box-shadow feature.

I want to add a box-shadow to the whole wrapper of my webpage, which contains the header, nav, content and footer.

The nav and content are side by side element.

The problem is, that when I add the box-shadow to the #wrapper, it only appears on the header, as I reproduced here

I was able to fix it by using the side by side elements with the display: table-cell propriety, but it ruined the rest of the page, so I'm asking how could I fix this.

Answer 1

Add overflow:hidden to your wrapper as shown here. It will force your container to wrap the floated elements.

[edit] Without having to add extra markup...