Geek Answers Handbook

Box-shadow and 100% fluid width problem

I was processing a page that I had created in the last day or two, and ran into a problem after using box-shadow - I was hoping someone could shed some light on an easy way to fix this.

Setting: I have a div that has several properties, including width, max-width and box-shadow.

#mydiv { width:100%; max-width:1200px; -webkit-box-shadow: 0px 0px 20px rgba(0, 0, 0, 1); -moz-box-shadow: 0px 0px 20px rgba(0, 0, 0, 1); box-shadow: 0px 0px 20px rgba(0, 0, 0, 1); }

Problem: The box-shadow property adds 40px to the width of the div element - 20px on each side. When the screen is small enough for the content to fall within the 100% width attribute, we see a horizontal scroll bar. After digging in CSS, I found that it was because the div was technically more like a width: 100% + 40px;

What I tried: I looked at overflow setting: hidden in the parent div, but I have a min-width set that will then make the content inaccessible. I also tried using a percentage for the size argument in the CSS cache shadow - for example, 1%, and then set the div width to 98%, but the CSS shadow does not accept the percentage for its size. I also considered using javascript to check the width of the browser, and then show or hide the box-shadow element appropriately, but that doesn't seem like the optimal solution.

There should be an easier way to handle this. Thoughts?

+6
css css3 width fluid
source share
2 answers

This is a browser error.

spec is unclear about this, but a wording has been added since then explaining that shadows should not 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 started scrolling for shadows. This has now been fixed in all recent browsers.

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

Also see the following two related questions:

  • Firefox and CSS3: using overflow: hidden and box-shadow
  • Shadow of CSS window on div container causes scrollbars
+9
source share

Workaround to the problem of scroll bars in nodes of the width of the liquid with the shadow of the boxes.

If you add the @media instruction in your CSS, you may find out when the browser window has a certain width (modern browsers support this and IE9 too).

For example, for a centralized page separator with a maximum width of up to 940px, try adding this to your stylesheet:

@media screen and (min-width: 998px) {div # pagewrap {-moz-box-shadow: 3px 8px 26px # a1a09e; -webkit-box-shadow: 3px 8px 26px # a1a09e; box-shadow: 3px 8px 26px # a1a09e; }}

The minimum width of 998px in @media css is to remove the cast shadow immediately before it launches the scroll bar.

0
source share

More articles:


All Articles