After spending the past couple of days refining a page I created, I've encountered an issue following the implementation of box-shadow. I'm hoping someone can provide some advice on how to easily resolve this.
The Scenario: I have a div with various 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);
}
The Issue: The "box-shadow" property is causing the div element to increase in width by 40px - 20px on each side. This results in a horizontal scroll-bar when the content should fit within the 100% width specification. Upon reviewing the CSS, I realized that the div was essentially being treated as width: 100% + 40px;
Possible Solutions Tried: I contemplated setting overflow:hidden on the parent div, but my min-width restriction would make the content unreachable. I also attempted using a percentage for the size attribute in the box-shadow CSS - such as 1% - and then adjusting the div's width to 98%, but it appears that the box-shadow CSS does not support percentage values for its size. Another option considered was employing JavaScript to assess the browser width and show or hide the box-shadow component accordingly, although this doesn't seem like the most efficient approach.
There must be a simpler method to address this dilemma. Any suggestions?