Search code examples
cssclip

Get rid of horizontal box shadow even if it's 0

Even if I set the box-shadow horizontal value 0 it gives plus width to the div. How can I get rid of those extra pixels if the element width is not known or it's set to 100%?

I've found this method that uses the CSS clip property, but it only works if the elements width is known in pixels.

I could calculate the pixels with jquery/javascript and then use that value, but I'm sure that there is a simpler.

Thanks.

Solution

  • You need to add a wrapper, float it and then set overflow: hidden.

    #wrapper {
  float: left;
  margin: 50px;
  padding: 0 20px;
  overflow: hidden;
}

    Here is a demo http://jsfiddle.net/n8LWF/