Fix The Full Width Box-Shadow Bug

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;}

Recent Posts

Magazines and much much more

Mar 09, 2011

So it's been a while since I had wrote a blog post so I thought I would finally take some time and let you know what I have been up to lately. I have been crazy busy to say the least and a lot of exciting projects...read more

Fix The Full Width Box-Shadow Bug

Oct 04, 2010

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...read more

Steve Mullen Interview

Apr 22, 2010

I was recently contacted by a college student and asked to answer a few questions for a class project. I figured since I already had it typed up I would share it on my site....read more

Destin Car Wrap Complete!

Mar 16, 2010

I recently designed my first car wrap for a client. It was a fun project and I was anxious to see the final result. I was a little nervous since I had never designed on before and the design was fairly complex....read more

More Posts

New Free Desktop Wallpaper

ITR Photo-shoot

New Addition!

Stop Designing in Photoshop. No thanks!

Behold Apple's iPad

Let it Snow Wallpaper: Download

Text layout in Photoshop using shape layers.

Powered by modx

Web Development: How I get it done

New Desktop Wallpaper

15 Inspirational Home offices

Color Profiles in Modern Browsers

Big Update!

Free Texture Pack #1

Run Your Old Add-Ons in FireFox 3.5

Downtown Tulsa - A Photographic Tour

Souled Out Website Launches!

Get rid of those ugly link outlines.

New Website Launched!



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.

Twitter Feed