Force horizontal scrollbar when resizing browser window

Forum Moderators: not2easy

Message Too Old, No Replies

Force horizontal scrollbar when resizing browser window

snehula

12:29 pm on May 16, 2011 (gmt 0)

Hi there :-)

I would really appreciate some help with page resizing issues. I have a tabbed menu on the site i'm trying to put together, and other stuff on each page. Now, normally if users resize any of the pages, stuff begins to float around and the tabbed menu flows on to the next line and gets ugly. I'm looking for a way to prevent this from happening, and have a nice layout that stretches the width of the page with additional scroll controls rather than flowing on to the next line and messing up the whole thing.
I tried using overflow:auto on the body tag, but honestly I ain't got a clue how to use it for the whole page rather than adding scrolls to individual elements or divs, anyway I didnt get the hang of the overflow thing.
Thanks :-)

If the level of "expertise"/stupidity in my questions insults you, you're probably the right person to answer them :-)))

lucy24

4:26 pm on May 16, 2011 (gmt 0)

Uh-oh. What I'm reading is "How can I force my users to keep their window at a certain size because my site looks prettier that way?" You can certainly force a page width by a variety of means, starting at the <body> level-- but are you absolutely certain you want to? I'm speaking here as a user, not a designer.

Someone else will come along and tell you exactly how to operate the gun ;)

alt131

10:09 pm on May 16, 2011 (gmt 0)

Now, now Lucy ... that would create an awful mess and no one ever volunteers for clean-up ;)

Hi snehula and a big welcome to CSS :)

I wonder if the menu bar is created by floating list items, perhaps inside another container (div?), with the width as a %? Browsers will usually create a horizontal scroll bar if an element's width exceeds the width of the viewport. So easiest to set a specific width (or min-width) in px on the element that contains the menu items.

However, really important to ask how that will affect users. Horizontal scrolling is often disliked, plus users with motor skills issues can have real difficulty moving between the scrollbar and menu items. Also the hidden menu items might be overlooked so parts of your site are never visited. Useful to ask if you want to risk those sorts of things.

tried using overflow:auto on the body tag, but honestly I ain't got a clue how to use it for the whole page rather than adding scrolls to individual elements or divs, anyway I didnt get the hang of the overflow thing.

Sounds like you almost did :) overflow:auto [w3.org] "should cause a scrolling mechanism to be provided for overflowing boxes"
But that needs an element to be wider than the containing box so it overflows and "triggers" the scrollbars. As you've explained, the elements aren't overflowing - they are rearranging themselves inside the containing box, which means they are not triggering a scrollbar.