horizontal scrolling only!

Question

Hi all 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

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 2

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/cssdilemma.html

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

The second example has 5 li's which do NOT exceed the width of the container div which means you do not 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