[HTML] How to stop horizontal scrolling?

MarkGilmour · Mar 9, 2011

Hi there, i wouldve used the search box but i dont know what to type in. Anyway, im making a website for a group thing, i would like to know. How do i make the webpage all one size so there is no horizontal scrolling? (Like ragezone has no horizontal scrolling, only vertical)

If you dont understand this reply back and ill try and word it more efficiently.
Thanks
Mark.
:sneaky2:

foxx · Mar 9, 2011

Re: [HTML] Website help needed.

Just follow these and someone might be able to actually help you

3. Use descriptive titles
Instead of "Need help!!" or "Look please!", explain in short what your title is about. Good titles are for example '

PHP:

 How to extract the  title from a remote website' or '[MySQL] Problem with ordering tables by  date'.
 
 [B]4. Include enough information[/B][COLOR=Red]
Make sure you paste relevant code, indicate what you tried already, etc.  If we have to guess what help you want it'll take a lot longer before  we can help you! [/COLOR]
 
 [B]5. Don't just dump your problem and hope we sort it out for you![/B][COLOR=Red]
Coders section is not a general 'I need something fixed so lets ask you  guys to fix it for me' forum! If you have a specific problem, for  instance a typecast that's giving you trouble or a regex that's not  working correctly, feel free to ask. But do not dump here 50 lines of  code with the message 'its not working, fix please', or expect us to  write your scripts for you![/COLOR]
 
 [B]6. Do not ask stupid questions![/B]
Contrary to popular believe, there are such things as stupid questions.  If we feel you could have answered your problem yourself with 5 minutes  searching or reading a manual, you [B]will[/B] get an infraction!         [/quote]

MarkGilmour · Mar 9, 2011

Re: [HTML] Website help needed.

yeah i dont know what its called, so i couldnt come up with a proper title, sorry..

JapyDooge · Mar 9, 2011

Code:

<style>
 body{
  overflow-x: hidden;
 }
</style>

GeNyaa · Mar 9, 2011

aah he means like the top...
The background?

Code:

body {
background-image: url("http://forum.ragezone.com/images/zoomtube/gradients/body.gif");
background-repeat: repeat-x;
}

Chris · Mar 9, 2011

If you're looking for a method to designing a web page that will not need horizontal scrolling, use a design that is around 900px in width. This way it won't be too thin, and just about every monitor will be able to fit it in their screen.

foxx · Mar 9, 2011

Standard used to be 960px, nowadays it's fine to use 1140px.

GeNyaa · Mar 9, 2011

foxx said:
Standard used to be 960px, nowadays it's fine to use 1140px.

This isn't true...
I still know people that need 960px

s-p-n · Mar 9, 2011

I was taught in high school to fit the 800px resolutions (around 780px including borders & margins). Lol.. This sure changed.

A strict width is easy.. Just do the math and make sure the DIVs never exclude the standard width (which seems to continuously increase over the years).

960 or 1140 seem good (but adjust for the browser and vertical scroll bar about 20px. Most developers assume the browser is maximized, so test it maximized.

If you want the site to work well all the time no matter what width the browser (to a point, the size of an element can cause a horizontal scroll despite any CSS/HTML sizing on it's parent..)

Anyway, you can use percentages in CSS (and html..)

Code:

<html>
<head>
<title>Hello Percentage Width..</title>
<style type="text/css">
.my_holder_class {
    width: 80%;
    margin: 0 auto 0 auto; /* top right bottom left.. */
    
}

.my_header_class {
    width: 100%;
    text-align: center;
}

.my_body_class {
    width: 100%;
    margin:-11px; /* subtract border and padding to correct placement */
    border: 1px solid #000; /* width style color.. */
    padding:10px;
    
}

.my_footer_class {
    width: 100%;
    text-align:center;
    font-weight: bold;
}
</style>
</head>
<body>
<div id="header" class="my_header_class">
  <h1>Hello World!</h1>
</div>

<div id="holder" class="my_holder_class">

  <div id="body" class="my_body_class">
    <h3>Sub title</h3>
    <p>This is some content on my site...</p>
  </div>

</div>

<div id="footer" class="my_footer_class">
  <p>© My Website 2011</p>
</div>
</body>
</html>

Notice the 100% declared in my_body_class is relative to it's parent. So it's border shows us 80% of the total browser width, no matter what size the window.

Also notice you have to subtract the margin by padding+border or the percentages will be thrown off in standards-compliant browsers.

but percentages get annoying with added complexity... Fixed width is much simpler. and only requires basic (very basic, add/subtract) math.

foxx · Mar 10, 2011

Nyaa said:
This isn't true...
I still know people that need 960px

This is very true.

You must be registered to see links

[HTML] How to stop horizontal scrolling?

MarkGilmour

Newbie Spellweaver

foxx

Hm.

MarkGilmour

Newbie Spellweaver

JapyDooge

Newbie Spellweaver

GeNyaa

Custom Title Activated

Chris

Developer

foxx

Hm.

GeNyaa

Custom Title Activated

s-p-n

:-)

foxx

Hm.

Similar threads