Auto-adjusting elements in columns

[djr33]

I'm not sure this is even really possible without a lot of Javascript.

I'm pondering how to create a fluid layout in which there are [things] displayed vertically in a column, descending. Depending on the width of the page (if possible, or maybe just at a set number-- say 3), these items are divided.

For a visual, here's a rough version of the layout:

a|d|g
b|e|h
c|f|i

The idea is that they dynamically slide around, or at least do in the first place.

Now, I know I could do this with PHP when the information is gathered from the database, but that seems like it won't fully use the space (why I'd like it to be adjustable.)

So, the real question I have also is more complex-- these aren't just images, or something else that slides around properly. These are lines of text.

I'm creating a dictionary, and I want one word per line, in columns, distributed across the page.

So it will look like:
aardvark: an animal
about: related to
accordion: musical instrument
etc.

Then each will be distributed to the proper column.


Anyway, I'll just start doing this with PHP and adjusting them into 3 columns. But if someone has an idea how to properly slide all of these around, that would be great.

[Medyman]

You could do it in rows, as I'm sure you know. But I can't think of a way of doing it vertically without, as you say, a lot of javascript.

That is to say, you could achieve:
a | b | c
d | e | f
g | h | i

but not how you've posted it above.

[djr33]

Out of curiosity, and to help with the other method, what would be the best "chuck" of text, styled with CSS, to slide around.

Doing images would be incredibly easy, just having a space between each and it would become a "paragraph" of images, and they'd split into the lines properly.

But what sort of div? table? p? would fall into place properly as if it was a paragraph of text chunks?

I realized the cheap solution would just be to use   between the words, but there must be something more proper.

However, the other problem with that method is that you end up 1. not adjusting dynamically if the window changes size; 2. I cannot align each column to the left, or right, etc., necessarily. Spacing would probably work out evenly, but that's uncertain.