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'll get downvoted to hell for saying this, but ... use a table!

Well it's not the prettiest way but it can solve your problem i guess

Answer 2

I use this chunk of Xsl to generate a table with a fixed number of rows:-

<?xml version="1.0" encoding="UTF-8" ?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"&gt;
<xsl:output method="html" encoding="UTF-8" />
<xsl:variable name="rowCount" select="6" />
<xsl:template match="/*">
 <table rules="all">
  <xsl:for-each select="item[position() &lt;= $rowCount]">
   <tr>
    <xsl:for-each select=". | following-sibling::item[position() mod $rowCount = 0]">
     <td><xsl:value-of select="." /></td>
    </xsl:for-each>
   </tr>    
  </xsl:for-each>
 </table>
</xsl:template>

</xsl:stylesheet>

You can replace the rowCount variable with a parameter. All you then need is to calculate how many rows the vertical client height of the view port will take (bear in mind you loose some when the horizontal scroll bar appears, I would make it always visible).

This could be adapted to a set of floating divs but I wouldn't bother. Your viewport just needs to be a div with a fixed height/width and overflow-x:scroll; overflow-y:hidden.

Answer 3

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.

Answer 4

To manage the scroll of your viewport, you can set the CSS overflow property:

div#viewport{
  overflow: scroll;
  overflow-x: scroll; /* not sure if it's standard */
  height: 150px;
}

Answer 5

I ended up using a little server-side preprocessing. This site, and this particular page, ended up needing a fair amount of preprocessing anyway, and I don't expect the size of the data to get too huge.