Only horizontal scrolling!

Question

I have one 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 I realized that since the menu is a LIST, different elements of the list break the line when they reach the width of the <div> and go to the next line, so the browser does not see the need for a horizontal scroller (it also does not display a vertical line due to the overflow-y: hidden; line overflow-y: hidden; )

Any ideas how I can create a single line horizontal menu that will scroll only horizontally?

Thank you very much.

Answer 1

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

I did a little test so you can see:

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

The first example has 6 or so li that are larger than the width of the container div, which means you don't need a scroll bar.

The second example has 8-9 li that DO exceed the width of the div container, which means you need a scroll bar.

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

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

Greetings G.Campos

Answer 2

Perhaps you can use the white-space property to prevent wrapping. It is hard to know if this is applicable in your case without additional 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; It will allow

float left without wrapping to the next line and will scroll only when crossing the border of the parent div.