SitePoint Sponsor

User Tag List

Results 1 to 19 of 19
  1. #1
    SitePoint Addict
    Join Date
    Aug 2008
    Posts
    319
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    site has horizontal scroll

    So, for some reason my site has horizontal scroll which is annoying. I have divs set to 100% and margin:0 auto;, but I'm guessing that its because of padding, borders, or margin making it go beyond 100% width?

    Am I on the right track??

    I see this on the desk top and mobile layouts.

  2. #2
    SitePoint Addict bronze trophy
    Join Date
    Sep 2005
    Posts
    317
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)
    You could change overview: hidden on it. But that might cause you other errors down the line. Do you have an example of the code we can see?

  3. #3
    SitePoint Addict
    Join Date
    Aug 2008
    Posts
    319
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I thought I provided the link , but I guess not.

    http://www.connect4webdesign.com/

    I did try overflow:hidden on the body but it didn't fix it completely.

  4. #4
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,791
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    first a concept:

    a BLOCK level element is 100% width by default. You shouldn't declare 100% width unless the situation demands it.

    Also, by declaring 100% width you make padding/borders become ADDED to the calculated width. In other words, width:100%; padding:1em= 100%+2em.

    So in this case #Footer, which is already 100% the width of your body , gets 2 additional ems of padding and on top of that since you made your body be the width of the screen ( width 100% then the screen must grow bigger than itself (thus the scroll bars)


    Try taking the horizontal padding of #Footer and see if it help. Do note that you may have other places in your code in which you are doing the same thing, the easiest solution is NOT to declare width:100% ; for block elements.

    hope that helps

  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,115
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    These days, the easiest way to deal with the issue dresden_phoenix mentions is to change you box model, but adding this to your CSS file:

    Code:
    *, *:before, *:after {-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;}
    Job done.

    I use this on all projects now.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  6. #6
    SitePoint Addict
    Join Date
    Aug 2008
    Posts
    319
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for both answers. I just tried

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

    and I likes that. I may go back and try Dresden's solution because it seems like the best way to do it. The ralph.m way seems to shrink my content some and no one likes shrinkage.

  7. #7
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,115
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    The border box solution returns us to the box model we should always have had (one of the few things IE was right about, even though it was wrong about it, too!)

    If you are seeing shrinking, maybe consider adding back some padding where you want it. The layout looked fine to me with the code applied.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  8. #8
    SitePoint Addict bronze trophy
    Join Date
    Sep 2005
    Posts
    317
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    These days, the easiest way to deal with the issue dresden_phoenix mentions is to change you box model, but adding this to your CSS file:

    Code:
    *, *:before, *:after {-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;}
    Job done.

    I use this on all projects now.
    That is pretty useful! I'm gonna use this now too haha.

  9. #9
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,115
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Yes, I love it. That code is by Paul Irish, I believe:

    http://www.paulirish.com/2012/box-si...order-box-ftw/

    And here's Chris Coyier on the topic:

    http://css-tricks.com/box-sizing/
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,288
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Patche View Post
    That is pretty useful! I'm gonna use this now too haha.
    The only thing to remember is that it is only IE8+ compatible as ie7 and under don't understand box-sizing as such (although they do revert to thatborder-box mode lin quirks mode).

    An added benefit to using the box-sizing rules is that suddenly form elements are easier to handle because presently some elements (like select) already use the border-box model while others like inputs do not and you end up with inconsistent sizes when using the same dimensions.

  11. #11
    SitePoint Addict
    Join Date
    Aug 2008
    Posts
    319
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ralph I just added the code back that you suggested. The problem is/was that it made my footer circles ovals and.....Well, I fixed the other issues which were just things that I could correct. Overall I like the fix.

  12. #12
    SitePoint Addict
    Join Date
    Aug 2008
    Posts
    319
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I was saying that the border-box method makes the circles in my footer ovals bc of the border. Any solution for this?

  13. #13
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,115
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by BrianBam View Post
    I was saying that the border-box method makes the circles in my footer ovals bc of the border. Any solution for this?
    Where are you seeing this? They look round to me in Chrome.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  14. #14
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,466
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Where are you seeing this? They look round to me in Chrome.
    The circles are *slightly* ovoid.

    If you disable the border, the circles become round, but borderless.
    Code:
    .circle-text:after {
        content: "";
        display: block;
        width: 100%;
        height:0;
        padding-bottom: 100%;
        background: -webkit-linear-gradient(#3b6788,#69a8d7); /* For Safari */
        background: -o-linear-gradient(#3b6788, #69a8d7); /* For Opera 11.1 to 12.0 */
        background: -moz-linear-gradient(#3b6788, #69a8d7); /* For Firefox 3.6 to 15 */
        background: linear-gradient(#3b6788, #69a8d7); /* Standard syntax */
        -moz-border-radius: 50%;
        -webkit-border-radius: 50%;
        border-radius: 50%;
        border:.3em solid #666;
    }

  15. #15
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,115
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by ronpat View Post
    The circles are *slightly* ovoid.
    O, right. To my eye, they looked fine.

    An alternative to border would be box-shadow, the which suffereth not from the same havior:

    Code:
    .circle-text:after {
        box-shadow: 0 0 0 5px #666;
    }
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  16. #16
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,466
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    This works, too!

    Change: (delete the red stuff, add the blue stuff)
    Code:
    .circle-text:after {
        content:"";
    to
    Code:
    .circle-text {
        -webkit-box-sizing:content-box;
        -moz-box-sizing:content-box;
        box-sizing:content-box;
    I think box-sizing may not play well with generated content.

  17. #17
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,466
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    Off Topic:

    Quote Originally Posted by ralph.m View Post
    O, right. To my eye, they looked fine.
    It did sound like the problem was a bit more obvious.

  18. #18
    SitePoint Addict
    Join Date
    Aug 2008
    Posts
    319
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks. This worked. It might be slightly oval still, but I think I'm just paranoid now.

    Quote Originally Posted by ronpat View Post
    This works, too!

    Change: (delete the red stuff, add the blue stuff)
    Code:
    .circle-text:after {
        content:"";
    to
    Code:
    .circle-text {
        -webkit-box-sizing:content-box;
        -moz-box-sizing:content-box;
        box-sizing:content-box;
    I think box-sizing may not play well with generated content.

  19. #19
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,466
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by BrianBam View Post
    Thanks. This worked. It might be slightly oval still, but I think I'm just paranoid now.
    No, it's just plain round. Paranoia can have a rest

    Cheers


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •