Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

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

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

Problem

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.

Problem courtesy of: elbatron

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/

Solution courtesy of: Duopixel

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

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

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×