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!

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!

• javascript
• html
• css

Share Improve this question Follow edited Mar 10, 2011 at 14:24 J. Frankenstein asked Mar 9, 2011 at 23:30 J. FrankensteinJ. Frankenstein 1,7211414 silver badges2424 bronze badges 3

• 1 @Frankenstein Columns are here: w3/TR/css3-multicol – Šime Vidas Commented Mar 9, 2011 at 23:36
• Šime, this is great! You should make this into an answer so that I can check it! – J. Frankenstein Commented Mar 10, 2011 at 1:22
• Well, except for having it flow around the crossword ... any thoughts on that? – J. Frankenstein Commented Mar 10, 2011 at 1:42

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 1

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

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.

Use what you have. Set the position on the crossword box to relative and move it up. I obviously can't see your source but with a little tweaking that should make it do what you want. You may also need to float the text to the left.