Home/ Questions/Q 6085361
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-23T11:37:49+00:00

I am formatting a web page to display a crossword puzzle. I would like

  • 0

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:

Crossword Layout

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:

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:

Floating Grid

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!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0