Forums

Give help. Get help.

  • # 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

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

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

    # 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…

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

You must be logged in to reply to this topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag