CODEWITHSUNDEEP
javascripthtmlcss
J. Frankenstein
J. Frankenstein

Reputation: 1721

HTML layout for Crossword Puzzle

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!

Upvotes: 7

Views: 4285

Answers (3)

J. Frankenstein
J. Frankenstein

Reputation: 1721

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.

Upvotes: 1

smartcaveman
smartcaveman

Reputation: 42276

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.

Upvotes: 0

Edward Z. Yang
Edward Z. Yang

Reputation: 26762

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

Upvotes: 1

Related Questions