1

I'm creating web app and I'm stuck so I need your help. So, user can dinamically create <ul> which appears in container, everything is ok until number of unordered lists exceeds the width of container, then those lists starts to appear under already created lists, but I want them always on top of container and when user needs more space to store all list horizontal scrollbar should appear. I already placed overflow: auto; in my container but it only works for vertical scrollbar.

<div class="columns columnsPrivate">
   ... some simple unordered lists with couple list items which I append using javascript

</div

So my question is, how to force those unordered lists to appear on top of 'columns' class, and when I say on top I mean position: relative: top: 0px;, without placing them below already created lists.

Dimitri Dewaele
  • 10,311
  • 21
  • 80
  • 127
Alen
  • 897
  • 2
  • 15
  • 33

2 Answers2

0

Try

ul {
    overflow: auto;
    white-space: nowrap;
}

http://jsfiddle.net/AyjZf/

beautifulcoder
  • 10,832
  • 3
  • 19
  • 29
  • This doesn't work for me because I have unordered lists which represents columns and list items represents rows, so every columns must be next to another columns and list items below list item but inside it's parent. So I achieved that easily but when I add another column it goes below other columns and rows – Alen Oct 16 '13 at 13:21
  • Actually it works, it seems I had float:left; that's way it didn't work. Thank you – Alen Oct 16 '13 at 13:44
0

This one's answered here, be sure to do a little more research next time :)

Use overflow-x: auto; for horizontal scrollbars.

Community
  • 1
  • 1
bmon
  • 31
  • 2