Welcome to WebmasterWorld Guest from 35.171.146.16

Forum Moderators: open

Message Too Old, No Replies

How to Prevent Horizontal Scrolling

     
2:01 pm on May 20, 2014 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:July 13, 2008
posts:1145
votes: 0


How do you prevent horizontal scrolling on a website?

I don't have a large screen resolution, but when I look at the Webmasterworld website, I don't get horizontal scrolling. Even when I zoom in, I don't get it.

Can you guys tell me how to do this? Is there something that you can do so that for different screen sizes (e.g. laptops, tablets), there is no horizontal scrolling?

Do I put everything on the page inside a <div> where I indicate the width of the <div> at something like 90%? Would that mean that on any size screen that the page is looked at, it only goes across 90% of the screen? Am I interpreting this properly?

Would I have to do something else?

I would appreciate your help.
2:53 pm on May 20, 2014 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Oct 17, 2005
posts: 5021
votes: 26


If you use fluid widths instead of fixed widths, your page will generally adjust. That means avoiding fixed pixel widths. The width could be 100%, 90%, or whatever (as long as it's not greater than 100%). :)
4:02 pm on May 20, 2014 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:July 13, 2008
posts:1145
votes: 0


If the width is set at 100%, will the content go all the way to the edge on the left and right sides of a page on the different types of devices?
4:13 pm on May 20, 2014 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Oct 17, 2005
posts: 5021
votes: 26


It should, unless it's zoomed in or out.
4:28 pm on May 20, 2014 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:July 13, 2008
posts:1145
votes: 0


If the width is set at 100% and zoomed in, could that create horizontal scrolling?

Should I set the width at perhaps 90% so even if there is zooming in, there is no horizontal scrolling?

I appreciate your help.
5:07 pm on May 20, 2014 (gmt 0)

Administrator from US 

WebmasterWorld Administrator not2easy is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Dec 27, 2006
posts:4457
votes: 331


If your container div is set to 100% and you have other containers within that are set to pixel widths, you can end up with a horizontal scrollbar. An example would be a table layout with a column having a pixel width setting inside the parent 100% div tag that contains the page.
7:03 pm on May 20, 2014 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

joined:Apr 9, 2011
posts:15805
votes: 846


Width in percentages has nothing to do with it. Well, almost nothing: If you use negative percentages in the right places, you can ensure that a site will always have a horizontal scroll. (I've achieved this by accident in ebooks :()

A horizontal scroll bar means that the the site wasn't designed to be responsive (magic word that you should memorize). That's the shortest possible answer. There are long threads about responsive design. Then you start getting into questions of whether the problem is that the site author doesn't know (as in your case) or that the author doesn't care.
4:17 pm on May 22, 2014 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:July 13, 2008
posts:1145
votes: 0


Thanks for the responses.

I also want to have a little spacing on the left and right sides of the page, so can you please tell me if I would have to center the <div> in addition to setting its width to 90%?
4:31 pm on May 22, 2014 (gmt 0)

Administrator from US 

WebmasterWorld Administrator not2easy is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Dec 27, 2006
posts:4457
votes: 331


margin: 0 auto;
will center it.
1:15 am on May 23, 2014 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:July 13, 2008
posts:1145
votes: 0


For some reason, I think that margin: 0 auto does not always work.

Maybe there needs to be some other things included with this for it to work. Do I need to put anything more? Other elements, etc.

Also, if I can't center with margin: 0 auto, can I possibly do width=80% text-align=center with a <div>?

I appreciate your help.
1:26 am on May 23, 2014 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Oct 17, 2005
posts: 5021
votes: 26


margin: 0 auto didn't work in older versions of IE, and there was a bug in IE8 standards mode that caused it not to work either. If you don't need to support those obsolete browsers, margin: 0 auto should work fine.
3:36 am on May 23, 2014 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member tangor is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Nov 29, 2005
posts:10285
votes: 1050


Some have worked with max-width to ensure no horizontal scroll. I don't use that myself, but might be something to look into. As others have noted, fluid, responsive design doesn't really care about the actual browser window size or the resolution.
4:46 am on May 23, 2014 (gmt 0)

Administrator from US 

WebmasterWorld Administrator not2easy is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Dec 27, 2006
posts:4457
votes: 331


Also, if I can't center with margin: 0 auto, can I possibly do width=80% text-align=center with a <div>?

Is this a html 4 document? Then you don't want margin: 0 auto; that wouldn't work. Are you adding style to the elements inline or in a stylesheet? I ask because text-align=center is not valid inline syntax and the = makes me think your page might be html4. To give proper help, it would help to know the document type - what's up on the first line of the page, that is what tells the browser how to handle elements and how to add styles.
2:25 pm on May 23, 2014 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:July 13, 2008
posts:1145
votes: 0


Thank you for the responses, everyone.

tangor,

Should I set the max-width to 100% or should I use a lower percentage?

not2easy,

I apologize, I meant to say text-align:center. Also, for width, I meant width:80%. I may add the elements inline or in a stylesheet. The Doctype is html. Is margin: 0 auto something that is a part of HTML 5 and not HTML 4?

If I were using HTML 4 and I cannot use margin: 0 auto, can you tell me what I should do?

Would using width:80% and text-align:center with a <div> be a possibility?
3:35 pm on May 23, 2014 (gmt 0)

Administrator from US 

WebmasterWorld Administrator not2easy is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Dec 27, 2006
posts:4457
votes: 331


Would using width:80% and text-align:center with a <div> be a possibility?
text-align:center would align the contents of the div in the center so IF this is the div that contains the contents of the page, then it could align the page in the center, but every element inside the center aligned div would need to be text-aligned left or right if the entire page's contents were not wanted to display as centered.

The Doctype is html
That is used for html5 which should handle margin: 0 auto; just fine, but as in any doctype, if there are any other errors on the page it will throw some browsers into Quirks Mode, then things get out of hand and browsers handle things in different ways (especially IE's older versions). A piece of older code pasted into a new document is an example, such as a table with a border style inline or cellpadding, that is deprecated and means things don't behave as you wanted. A tag like <center> or <font> doesn't belong in html5.
4:34 pm on May 23, 2014 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:July 13, 2008
posts:1145
votes: 0


Thank you for both of these explanations.

What you mention about text-aligned left or right is something that I was thinking about, but with what you have written, I now know what I have to do if I center a <div>.
3:24 am on May 24, 2014 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:July 13, 2008
posts:1145
votes: 0


not2easy,

I think that I might have to use margin: 0 auto or margin-left:10% and margin-right:10% (just an example) because I want there to be spacing on the left and right sides of the page and by using text-align:center, I think that will center the contents in the <div>, but it will not center the <div>.

Do you think I need to use margin: 0 auto or margin-left:10% and margin-right:10% with a <div> for the spacing on the left and right sides of the page and text-align:left with the elements (e.g., <p>, <h1>) in the <div> so the content in the different elements is not centered within the <div>?

I appreciate your help.
3:38 am on May 24, 2014 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member tangor is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Nov 29, 2005
posts:10285
votes: 1050


Take a look at this [bluerobot.com...] and view page source for the code. The IE browsers which don't support it are reduced to IE5 ... and who's using that these days?
5:17 am on May 24, 2014 (gmt 0)

Administrator from US 

WebmasterWorld Administrator not2easy is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Dec 27, 2006
posts:4457
votes: 331


Thank you tangor, that site said it more clearly than my effort above.

@gouri, have you tried viewing your work as you go? Some text editors let you preview your work or if the file is in a folder on your computer you can open the file with a browser to see if you like a change and see if it does what you want. When you are happy with results, then look at uploading and checking it online and trying other browsers.

To answer your question about
margin-left: 10%;margin-right: 10%;
it is slightly more tricky that way because if you are setting 80% width for the page container div and then set margins as % numbers you need to be certain not to have a width settings higher up like
body {margin: 2px; padding: 4px; }
because then you don't have 100% remaining to work with. The margin: 0 auto; is a shortened way of telling the browser to give the div 0px margin top and bottom and automatically split any leftover space evenly to the left and right. So for a div set for 80% width it would be aligned in the middle of the page if no other setting or error prevents that. The example tangor links to covers it all clearly.
10:58 pm on May 24, 2014 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:July 13, 2008
posts:1145
votes: 0


@tangor,

Thank you for the link. That is helpful.

@not2easy,

Thank you for the explanation. What you mentioned are things that I have to keep in mind.

Would I be able to use margin: 0 auto with the <body> element instead of with a <div> because I want all the content on the page to have the empty space on the left and right sides, and I think that using margin: 0 auto with the <body> element would accomplish that?

Thanks.
11:26 pm on May 24, 2014 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member tangor is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Nov 29, 2005
posts:10285
votes: 1050


You could... but I personally like to keep body neat and clean as it is the ultimate container for the page. Anything inside body is content of some kind... and I'd rather have control of the content at smaller levels.

Whatever your choice, just be consistent! Make some decisions on how you will code now AND in the future so that mistakes are not made because you change horses mid-stream some where down the line.
11:40 pm on May 24, 2014 (gmt 0)

Administrator from US 

WebmasterWorld Administrator not2easy is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Dec 27, 2006
posts:4457
votes: 331


I agree with not setting margins in the body, that means the body width is smaller than the screen and it could be hard to control the appearance of areas outside the body. I've never tried it to see what it looks like. Best to stick with common settings at least while you are still learning the how to's of css.
12:34 am on May 25, 2014 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

joined:Apr 9, 2011
posts:15805
votes: 846


it could be hard to control the appearance of areas outside the body

That's assuming you have areas outside of-- that is, left or right of-- the body. I've always done something like

body {margin: 1em 8%;}


with the exact side margin depending on type of page. And then in the @rules for smaller devices the margin gets progressively smaller. It's about overall look: if an ordinary desktop browser window gets wider or narrower, I want a consistent proportion of empty space. Ten years down the line I'll probably be able to use a calculated value, where the percentage is directly determined by device width, like
(maxwidth/200)%
2:21 am on May 26, 2014 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:July 13, 2008
posts:1145
votes: 0


Thank you all for the advice. Some good advice on consistency and going with the norm when learning CSS. I was thinking of going with something similar to what lucy24 mentioned but now I am thinking that it might be good to go with setting the margins of the <div>.
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members