horizontal scrolling only!

Question

i have a that contains a HORIZONTAL menu. the menu consists of an unordered list. i would like the div to get a horizontal scroller whenever the menu exceeds the width of the <div>. i tried using these CSS definitions for my <div>:

position: absolute;
width: 380px;   
overflow: auto;
overflow-y: hidden;
height: 30px;

but than realized that since the menu is LIST, the different list items break the line whenever they reach the width of the <div> and move on to the next line, thus the browser doesnt see the need for a horizontal scroller (it doesnt display a vertical one as well because of the overflow-y: hidden; line)

any ideas how i can create a 1 line horizontal menu which will scroll horizontally only?

thank you all so much.

Answer 1

As far as I know, there's no CSS-based workaround for this. However, you can use Jquery to solve it.

I made a little test for you to see:

http://sotkra.com/stackoverflow/cssdilemma/cssdilemma.html

The first example has 6 or so li's which exceed the width of the container div which means you DON'T need a scrollbar.

The second example has 8-9 li's which DO exceed the width of the container div which means you DO NEED a scrollbar.

Basically, you use Jquery to count the number of li's inside your div using size(). If they exceed X number, in my example's case 6 (the limit before scroll is needed), then a class is added to the ul to extend its width (.longer) so that there's no line break and the horizontal scrollbar appears.

It also adds another class (.taller) that increases the height to accomodate the scrollbar itself.

Cheers G.Campos

Answer 2

You might be able to use the white-space property to prevent wrapping. It's hard to know if it's applicable in your case without more code.

For your div, try:

white-space: nowrap;

Answer 3

You need to put one massive horizontal div inside the parent div with overflow: auto; This will allow the

to float left without wrapping to the next line, and it will only scroll when the boundary of the parent div is crossed.