Steve Mullen Creative | Fix The Full Width Box-Shadow Bug

Steve Mullen Creative Home Home the work words about

Fix The Full Width Box-Shadow Bug

After doing some further testing adding overflow:hidden to the body, or html results in never having a scroll bar no matter what the width of the browser window. This is highly unadvisable as users will smaller resolutions, or users that like to have a narrow window will not have the ability to navigate your page horizontaly.

I recently ran into a problem where I wanted to use box-shadow to create a divider between a header and the content of a site. The div I was putting the shadow on was set to 100% width so the background would repeat the whole width of the browser. When I added the box-shadow it added to the 100% width and created a horizontal scroll bar not matter how wide your browser window was. Overflow:hidden on the div itself did not work but by adding overflow-x: hidden; to the body seemed to do the trick nicely.

I know this is super simple but I figured I would share the info as I am sure someone out there will get stumpped on this very thing. It's always the little things you think of last.

body{overflow-x: hidden;}

Write a comment

Required fields are marked with *.

Nick Howell Reply #6 Oct 13, 10

Re: I found your site while looking for a solution to this... it sounded perfect but upon trying it out I found that the extra width on the page is still there. All this does is remove the scrollbar. You can still scroll to the right with a mouse or trackpad that supports horizontal scrolling or by using the middle click scrolling. Unfortunately it's not good enough for my taste. I will continue searching.

Reply #5 Oct 14, 10

@Nick Thanks for the comment Nick. As you can see from my update at the top of this page I have found another issue with this approach. If you find a better solution please post it up here for others that might be looking for an answer to this problem as well. I will continue my search also.

Steven Reply #4 Feb 18, 11

Re: There has to be a way to fix this :)
I'm still searching. Have you guys found a solution?

Matt Haff Reply #3 Apr 28, 11

Nice! I ran into this same issue, your solution works beautifully!

Nope Reply #2 Apr 29, 11

Please use Please use overflow-x: hidden; instead... otherwise you kill the usability of your site...

Reply #1 May 1, 11

@nope You are totally right.. I can't imagine what I have put overflow instead of overflow-x. Hopefully anyone that has seen this noticed right away that it disables vertical scrolling and made the necessary adjustments.

Need a website?

I am currently available to do freelance projects. However I am not available to do freelance work for other agencies. If you would like to consider me for your next project please contact me and tell me a little about your project. If you still need a little persuading take a look at my work.