Vertical Wrapping in HTML

Question

I'm looking for a good way to do a vertical wrap. My goal is to fit a list of checkboxes into a div. I have the checkboxes sorted alphabetically, and I want the list to flow from the top of the div to the bottom and then begin again in a new column when they reach the bottom. Right now, I can do this by breaking the list into chunks of a predefined size on the server-side before feeding it into my html template. But things get messy when the list gets so long that you have to scroll. I'm hoping to force it to scroll horizontally only. This is not so easy, since I'm holding each chunk in a floating div, so white-space:nowrap doesn't seem to cut it. Currently, I'm using javascript count the number of list chunks and extend the width of an intermediary container (inside the div that serves as the viewport but containing the divs that contain the data). I want something that looks roughly like this:

 __________________________
| []..... []..... [].....  |
| []..... []..... [].....  |
| []..... [].....          |
| []..... [].....          |
|__________________________|
|<|_____________|___||___|>|

So I guess I have two questions:

1. Is there a good way to vertically wrap a list?
2. Is there a good way to force horizontal scrolling when the data gets too large for the viewport?

Answer 1

I'd use CSS3 columns. However, only WebKit (Safari, Chrome, ...) and Gecko (Firefox, ...) have implemented it so far, and you'll have to add their respective vendor prefixes (-moz-column-width:...; -webkit-column-width:...;) for it to work.

If IE has to get columns, floated divs would probably be the best way.