The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS [Solved] Horizontal scroll bar issue

  • This topic is empty.
Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
  • #33273

    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

    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


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


    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 Rexcalabrese!!! The overflow-x: hidden; worked perfect for me!


    @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.


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

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

    , I tried this in your site and it works:

    body { min-width: 1167px; }


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


    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. see for yourselves.

    Any guidance would be greatly appreciate.


    Such a lovely portfolio sate Kalee :)


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

    body { min-width: 960px; }

    will do the trick.


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


    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!

Viewing 12 posts - 1 through 12 (of 12 total)
  • The forum ‘CSS’ is closed to new topics and replies.