Home/ Questions/Q 8456527
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-10T12:34:03+00:00

Note: I don’t think that the I have worded the question the best possibly

  • 0

Note: I don’t think that the I have worded the question the best possibly way. Feel free to edit the title if someone has a better wording for the question that I am trying to ask.

Lets say we have a div that has some fixed height (and width).

Once the divs’ height increases, a scroll bar will appear. Instead of the scrollbar, I want text to go into the next ‘column’ of sorts.

Example:

A1          A1 A6
A2          A2 A7
A3          A3 A8
A4    =>    A4 A9 
A5          A5
- - - - - - - - - - - <-- where our fixed height is set.
A6          
A7          
A8          
A9

Thankfully for us (i think), the text is actually an unordered list like below.

<ul>
 <li><a href="">A1</a></li>
 <li><a href="">A2</a></li>
 ...
</ul>

So I am basically making a carousel with text which would have about 16rows in a column. Is there a direct way to make the text just go to the right once its finished with its available height or will I have to parse the list using javascript, break it into divs and then float them all? I am going to be using anchors based on the first letter of the text (A, B, C..) to scroll left/right.

Any help will be appreciated. Thanks!

EDIT: Is there something that would work for IE8+ (possibly degrade gracefully for IE6/7), Safari, Chrome and Firefox? I always forget to add various browsers to the question.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    This can be done using CSS3 columns quite easily. Here’s an example, HTML:

    <ul id = "limheight">
 <li><a href="">Glee is great</a></li>
 <li><a href="">Glee is great</a></li>
 <li><a href="">Glee is great</a></li>
 <li><a href="">Glee is great</a></li>
 <li><a href="">Glee is great</a></li>
 <li><a href="">Glee is great</a></li>
 <li><a href="">Glee is great</a></li>
 <li><a href="">Glee is great</a></li>
 <li><a href="">Glee is great</a></li>
 <li><a href="">Glee is great</a></li>
 <li><a href="">Glee is great</a></li>
 <li><a href="">Glee is great</a></li>
 <li><a href="">Glee is great</a></li>
</ul>

    CSS:

    #limheight {
    height: 300px; /*your fixed height*/
    -webkit-column-count: 3;
       -moz-column-count: 3;
            column-count: 3; /*3 in those rules is just placeholder -- can be anything*/
}
#limheight li {
    display: inline-block; /*necessary*/
}

    And a little demo: little link.

    Hope that helped!

    • 0