Forums

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

Home Forums CSS [Solved] Trying to get page to not horizontally scroll.

  • This topic is empty.
Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #167052
    tjgriffiths1
    Participant

    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

    #167058
    nixnerd
    Participant
    body{
        overflow-x: hidden;
    }
    
    #167061
    Alan C
    Participant

    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.

    #167063
    nixnerd
    Participant

    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.

    #167066
    Paulie_D
    Member

    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.

    #167075
    tjgriffiths1
    Participant

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

    Thank you very much guys.

    #167101
    nixnerd
    Participant

    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.

    #167123
    Paulie_D
    Member

    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.