[Solved] 100% Header + Box Shadow Issue

[noahgelman]

How can I use box shadow on a 100% width header without causing some horizontal scroll?

[GreatPotato]

I had a similar problem with Firefox recently (was a problem in Chrome, Safari et al), but I managed to fix it with:

body {

width: 100%;

overflow: hidden;

}

[noahgelman]

That takes away the horizontal scroll. However, it’s taking away my vertical scroll as well. Any other solutions?

[Letalos]

Hi Noah,

replacing the “overflow: hidden” with “overflow-x: hidden” solved the problem for me – horizontal scrollbars are gone, verticals are there.

For some reason I had to set the width of my header to 101%, otherwise the header wouldn’t have covered the whole width of the browser-window.

Best regards
Letalos

[noahgelman]

Ah ha! I see. I didn’t know there was an overflow-x property. Now that I think about it, having an overflow-x and overflow-y property makes a lot of sense. Thank you for your help.

[Author]

Posts