Site has horizontal scroll

HTML & CSS
1

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

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

I thought I provided the link , but I guess not.

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

4

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%:wink: 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

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:

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

Job done. :slight_smile:

I use this on all projects now.

6

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

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.

8

That is pretty useful! I’m gonna use this now too haha.

9

Yes, I love it. That code is by Paul Irish, I believe:

http://www.paulirish.com/2012/box-sizing-border-box-ftw/

And here’s Chris Coyier on the topic:

10

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

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

I was saying that the border-box method makes the circles in my footer ovals bc of the border. Any solution for this?

13

Where are you seeing this? They look round to me in Chrome.

14

The circles are slightly ovoid.

If you disable the border, the circles become round, but borderless.


.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

O, right. To my eye, they looked fine. :smiley:

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


.circle-text:after {
    box-shadow: 0 0 0 5px #666;
}
16

This works, too!

Change: (delete the red stuff, add the blue stuff)


.circle-text[color=red]:after[/color] {
    [color=red]content:"";[/color]

to


.circle-text {
    [color=blue]-webkit-box-sizing:content-box;
    -moz-box-sizing:content-box;
    box-sizing:content-box;[/color]

I think box-sizing may not play well with generated content.

17

[ot]

It did sound like the problem was a bit more obvious. :p[/ot]

18

Thanks. This worked. It might be slightly oval still, but I think I’m just paranoid now.

19

:slight_smile: No, it’s just plain round. Paranoia can have a rest :slight_smile:

Cheers