box-shadow and 100% Fluid Width Issue

It's a browser bug.

The spec used to be unclear about this, but wording has since been added to clarify that shadows shouldn't trigger scrolling:

Shadows do not trigger scrolling or increase the size of the scrollable area.

But as a result of this earlier omission, most browsers did trigger scrolling for shadows. This has now been fixed in all recent browsers.

In older browsers, you'll either have to live with the scrollbars, add overflow-x: hidden to your #mydiv and hope it doesn't break anything, or find another way to add shadows (e.g. using good old PNGs).

Also see the following two related questions:

• Firefox & CSS3: using overflow: hidden and box-shadow
• CSS box shadow on container div causes scrollbars