HTML layout for Crossword Puzzle

Question

I am formatting a web page to display a crossword puzzle. I would like to have it displayed in a format that is similar to how it appears in a newspaper so as to make it easier to print. Something like the following:

The idea being that there is one list of clues that we are working with and each column overflows into the next and the heights of the columns is optimized so that the first hits at the bottom of the crossword (the big box) and the other three are approximately the same height.

Is there a way to do this with CSS and HTML? I sort of suspect that there is not. Is JavaScript the way to go? Thanks!

---

EDITED TO ADD:

Using the -moz-column-width and -moz-column-gap I'm able to get this improved layout:

Any thoughts on how I could get the crossword to move up and have the clues flow around it? Thanks!

---

FURTHER EDITED TO ADD:

I tried floating the grid div and it just lays itself on top of the text, it doesn't actually push the text out of the way. Not sure how to change that. Here is what it looks like:

I did try floating the clues to the left, which lined them all up in a single column on the left hand side of the page. This is what happened whether I floated the individual list items or the entire ordered list. Any thoughts on something I've missed? Thanks for all your help!

Answer 1

See Newspaper-column in CSS; you can simply position the crossword itself as a float.

Answer 2

My solution was to use some JavaScript code to fill up the columns and resize the text if it didn't fit. Not the most elegant solution, but it worked.