Forum Moderators: not2easy

Message Too Old, No Replies

The question was about getting rid of *horizontal* scrollbars...

How to get rid of horizontal scrollbars?

         

drumjam_dan

6:47 pm on Aug 10, 2004 (gmt 0)



I am having the same problem.... In Explorer the vertical bar is always there, but in Mozilla Firefox it's only there when it needs to be... That causes the layout to shift a bit from page to page depending on the length of the content. What I would like to do is have a vertical bar there always, and horizontal only when necessary (although hopefully it won't be).... Firefox is the better browser, and the one that I use... so I'd like it to work using CSS....

ideally, though not the case, there would be these options:

scrolling: vertical;
scrolling: horizontal;
scrolling: both;

from what i've read, there is no way to accomplish what i'm trying to do.... i guess the only thing to do is have lots of content on every page! i don't want any kind of restrictions like that though.... any ideas?

-Dan

createErrorMsg

7:45 pm on Aug 10, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Pick a <div> in your layout and set it's height equal to a number larger than any vertical screen resolution.

So say you have a container <div> and inside that container is a floated sidebar <div> and non-floated content <div>. You could make the container <div> have a height: 1000px. (Is there a resolution with a vertical value higher than 1000? Could a human even read text at a resolution that high?) That would guarantee that there is always an element on the page pushing below the viewport and triggering the scrollbar.

The only problem I see is with your footer, which will always be down off the screen. Then again, I think most people know what sort of things can be found in the footer and if they need to see that stuff, they can always scroll down...

silk

10:20 am on Aug 11, 2004 (gmt 0)

10+ Year Member



If u want NO horizontal bar,

how about creating your entire webpage with a width of about 750px?

i.e. your body or containing div is set at say 750px..

Somehow i don't think you like that option. Well i think there might be a javascript solution. I never tried it, but i think it's worth looking into. Javascript can set scrollbars(1 or 0) and stuff.

Old_Honky

2:02 pm on Aug 11, 2004 (gmt 0)

10+ Year Member Top Contributors Of The Month



To remove horizontal and have permanent vertical scrolling just put this on your stylesheet

html,body
{
height: 100%;
width: 100%;
overflow-x: hidden;
overflow-y: scroll;
}

If you only want scrolling when necessary replace "scroll" with "auto".

createErrorMsg

2:19 pm on Aug 11, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



If u want NO horizontal bar,
how about creating your entire webpage with a width of about 750px?

Unless a user has screen resolution at 600X400, in which case the horizontal scrollbar reappears. Many elderly and otherwise visually impaired users still use this resolution setting...

To remove horizontal and have permanent vertical scrolling just put this on your stylesheet

html,body
{
height: 100%;
width: 100%;
overflow-x: hidden;
overflow-y: scroll;
}

Unless I'm mistaken, IE will still mess this up in certain layouts. I'm thinking specifically of floats with adjacent non-floated elements, where certain versions of IE calculate the width of the non-floated <div> starting at the edge of the float, not the edge of the container. Even with 100% width for the container, IE still interprets that to mean 100% of the content, not the viewport, and extends it beyond the right edge of the screen.

Still, that's probably the best solution you'll find. You just need to hack IE into line if your specific layout requires it.