Grow your CSS skills. Land your dream job.

[Solved] Trying to get page to not horizontally scroll.

  • # March 28, 2014 at 7:05 pm

    I have a very simple page, and for some reason, The content on the right spills over and creates the option to horizontally scroll, something that I definitely do not want. I am trying to debug it, but cannot seem to find the correct element that is causing the horizontal scroll, and was wondering if somebody could impart some wisdom on the matter.

    Thank you in advance.

    Here is the codepen:

    http://cdpn.io/Cpcyj

    NIX
    # March 28, 2014 at 10:08 pm
    body{
        overflow-x: hidden;
    }
    
    # March 28, 2014 at 10:12 pm

    Well it seems you have an over-abundance of padding. You can use box-sizing: border-box; to get rid of it.

    *, *:before, *:after {
      -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
     }
    

    You can read about box-sizing here

    Also – Side note, in code pen you don’t need the html/head/body tags. Anything that needs to go in the header can be put there by clicking on “HTML” at the top of the page. Also I noticed you have font attributes set on several individual elements and they are all identical. I would recommend condensing them.

    NIX
    # March 28, 2014 at 10:15 pm

    I think they easiest thing to do would be to use normalize.css instead of that reset and set overflow-x on your body/html to hidden. That way, if you ever want to move something off screen to have a fly-out panel or whatever, you’re covered. It’s not going to show.

    # March 28, 2014 at 11:34 pm

    I agree.

    * {
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
    }
    

    …solves the problem in the most accurate fashion. Using overflow:hidden is literally hiding the problem, not solving it.

    # March 29, 2014 at 3:49 am

    CSS Tricks is the best resource on the web because of people like you.

    Thank you very much guys.

    NIX
    # March 29, 2014 at 1:42 pm

    Using overflow:hidden is literally hiding the problem, not solving it.

    @Paulie_D from the way you said this, it almost sounds like you’re saying if you ever use overflow: hidden, you’re not doing something the correct way. You’re making it sound like there’s never a legitimate use for that declaration, where there absolutely is.

    I’m going to give you the benefit of the doubt and say you didn’t mean it this way. But, I would like to preserve the record for posterity.

    # March 30, 2014 at 12:09 am

    You’re making it sound like there’s never a legitimate use for that declaration, where there absolutely is.

    Of course there are many valid uses for the declaration otherwise it wouldn’t exist.

    In this case though I maintain that it’s the wrong way to go. Granted there was a problem but, to my mind, the resolution should have been to solve the underlying issue not paper over the cracks.

    Figuring out why the content was overflowing when it’s not supposed to makes us better coders that slapping a band-aid on it

    Using it here is like using !important to fix a specificity problem or using absolute positioning to get an element where we want it instead of adjusting margins/padding etc.

    Do they both work?

    Are they valid declarations?

    In both cases the answer is ‘Yes’ but they are ‘hacks’ in the sense that they get it done but not by using ‘proper/correct’ coding.

    Anyway, one mans meat…

    # March 30, 2014 at 6:25 am

    I’m going to add to the conversation for @tjgriffiths1 ‘s benefit. It was mentioned that the problem was the overabundance of padding. Well, that wasn’t fully the problem.

    There were two problems. Unless he understands them both, changing box sizing doesn’t help any more than overflow:hidden.

    The first was the use of padding with a 100% width on the footer. The default box model (content-box) adds padding to the defined width, so the footer was greater than 100% width in total, with the padding. Two things to mention here: one is that changing the box model will, as Paulie mentioned, change the way the width is calculated so that the declared width includes padding. And two, block level elements by default will take up all available width without the need to declare width: 100% – further, any horizontal padding will not expand the width beyond 100% (if the width is not declared).

    The second problem was that browsers by default will use either a left margin or left padding to indent lists. You set the #navlist to 100% and it had a default left padding (webkit and moz) making it greater than 100%. You could have cleared the default padding and/or not declared 100% width. Now, because the list is floating, the width is needed, however you don’t the float either, you could contain the child floats with other methods, or leave the float and width on the ul so long as the padding is cleared.

    So, to clarify, neither the overflow: hidden nor the change in box-sizing is needed. Neither method is wrong either. What’s important is to understand what is happening and why and then apply the changes you want to correct.

    edit// I should also mention that the overflow-x: hidden method has another drawback in that the elements content will not be centered, but slightly off because the extra width off to the right is being cut off (hidden) – the element with a width greater than 100% doesn’t center, but starts on the left…

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".