[Solved] Horizontal scroll bar issue

[keversole]

Hey everybody,

So I’ve been having this issue with my portfolio web site and a few other web sites I’ve been working with for the last few months – whenever I re-size my browser window on my sites in the latest version of Safari for Mac for example, the ugly horizontal scroll bar shows up of course, however when I decide to scroll right I notice that a lot of the background elements of my web site just disappear or get cut off depending on how much I have to scroll to the right! The elements that get cut off disappear and leave only the body background color or image to be shown. Now I am very shaky in my knowledge of best practices when it comes to fixed, fluid, elastic layouts, and I desperately want that to change.

Here are the links to the 2 web sites that have this issue

http://www.kalee-eversole.com

http://www.eversoletest.com

To replicate exactly what I am seeing open up Safari, re-size your browser window until you get the horizontal scroll bar, scroll to the right, and you’ll immediately see what I’m talking about.

Any input about how to re-adjust my layout to avoid this issue would be great!

Thanks everybody!

Kalee Eversole

[Rexcalabrese]

just looked forever and found solution…body{ overflow-x: hidden;}

[gwebster]

I’m having this problem as well. I’ve tried these recommendations to no effect. I was wondering if you ever got an answer or did you just turn off “overflow”?

I want to know how to make the site fluid once the scroll bars appear. Any further ideas?

Thanks.

[Neoone256]

Thanks Rexcalabrese!!! The overflow-x: hidden; worked perfect for me!

[joshuanhibbert]

@Rexcalabrese @Neoone256 Using overflow: hidden; is a quick fix that can cause as many problems as it fixes. I would simply recommend giving elements appropriate widths to avoid this issue altogether.

[Cucuzo]

Perhaps this is not the best solution, but it will solve the problem:

element-with-background { min-width: your-content-width-here; }

@keversole, I tried this in your site and it works:

body { min-width: 1167px; }

[coolneo4u]

@Cucuzo : Thank so much. “min-width” solved the problem. You saved my life~ ;)

[zdravo]

I agree with @joshuanhibbert. Hiding the overflow-x works, but will only cause problems later on. Cucuzo I have a similar problem that I can’t seem to fix with ‘element{min-width: XXXpx; }’ added and still no fix.

I just started working on this site and would love to fix it before I move deeper into the template structure.

What am I doing wrong?

This is the dev. version of the site. http://dev.thezdravogroup.com see for yourselves.

Any guidance would be greatly appreciate.

[apart]

Such a lovely portfolio sate Kalee :)

[Merri]

@zdravo: the solution is the same as above, in your case

body { min-width: 960px; }

will do the trick.

[zdravo]

Thank you @merri :) works perfect now. ~ Cheers!

[hedgehog34]

Does the work for me excellently. I tried everything recently as I knew it has something to do with widths, including overflow trick ( which didn’t really work properly), and didn’t think about this nice little trick.
Good stuff!

[Author]

Posts