What options exist to get text/ list items to appear in columns?

Question

I have a bunch of HTML markup coming from an external source, and it is mainly h3 elements and ul elements.

I want to have the content flow in 3 columns. I know there is something coming in CSS3, but what options do I have to get this content to flow nicely into the 3 columns at the time being? I'm not that concerned about IE6 (as long as it degrades gracefully). Am I stuck using jQuery to parse the markup and chop it up into 3 divs which float?

Thank you

Update

As per request, here is some of the HTML I am working with

<h3>Tourism Industry</h3>

            <ul>

                <li><a href="">Something</a></li>
                <li><a href="">Something</a></li>
                <li><a href="">Something</a></li>

                <li><a href="">Something</a></li>
            </ul>

            <h3>Small Business</h3>
            <ul>
                <li><a href="">Something</a></li>
                <li><a href="">Something</a></li>
                <li><a href="">Something</a></li>

                <li><a href="">Something</a></li>
                <li><a href="">Something</a></li>

            </ul> 

And a whole lot more following the same format.

Answer 1

Though I'm not sure I fully understand your question (but I think I do), I'd probably do something like this:

1. Create a div somewhere on the page and set the display property to none.
2. Retrieve the HTML and write it out to that div.
3. Grab each individual set of <h3> and <ul> elements (using jQuery), do any class applications or whatever that need to be done before displaying and write them to the target container. If you don't know how many sets of <h3> and <ul> you're going to be getting, a table would work best as a target (oh noez yes I said table!) since you'll be able to control where line breaks occur and the like (and this will actually go a long way in preserving compatibility with older browsers like IE6).
4. Remove hidden div from DOM.

Not sure if that's the answer you were looking for, but that's how I'd approach the problem. Good luck!

Answer 2

Given your sample of HTML, I doubt that there is any way to create a columned layout using only CSS. The problem is that your groupings of H3 and UL tags are not bound by any container. That makes it pretty difficult to float those groups and pack them into a collimated layout.

I think the process inkedmn outlined is pretty decent, given what you have to work with.

Answer 3

Personally, I'd just go with CSS3. With a bit of luck, it might even get implemented in IE9. If you need IE7/8/Opera support, I guess I'd add a JavaScript solution for when CSS3 isn't available (as other users have explained).