Advanced Search

Results 1 to 3 of 3

Thread: Auto-adjusting elements in columns

  1. #1
    Join Date
    Mar 2006
    Location
    Illinois, USA
    Posts
    12,156
    Thanks
    262
    Thanked 690 Times in 678 Posts

    Default Auto-adjusting elements in columns

    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.
    Daniel - Freelance Web Design | <?php?> | <html>| espa˝ol | Deutsch | italiano | portuguŕs | catalÓ | un peu de franšais | some knowledge of several other languages: I can sometimes help translate here on DD | Linguistics Forum

  2. #2
    Join Date
    Mar 2007
    Location
    Currently: New York/Philadelphia
    Posts
    2,735
    Thanks
    3
    Thanked 519 Times in 507 Posts

    Default

    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.

  3. #3
    Join Date
    Mar 2006
    Location
    Illinois, USA
    Posts
    12,156
    Thanks
    262
    Thanked 690 Times in 678 Posts

    Default

    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 &nbsp; 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.
    Daniel - Freelance Web Design | <?php?> | <html>| espa˝ol | Deutsch | italiano | portuguŕs | catalÓ | un peu de franšais | some knowledge of several other languages: I can sometimes help translate here on DD | Linguistics Forum

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •