image alignment challenge!

Discussion in 'HTML' started by CRON, Jul 30, 2006.

  1. CRON

    CRON Guest

    Hi, Can anyone think of a way to align a bunch of images or divs of
    random sizes into a grid where they touch border to border on both the
    top and the left hand side? obviously float:left will align them side
    by side but is there any way to ignore the line breaks when they wrap
    to the following line and align flush with the image above? It's hard
    to explain but its quite a simple concept.
     
    CRON, Jul 30, 2006
    #1
    1. Advertising

  2. CRON

    dorayme Guest

    In article
    <>,
    "CRON" <> wrote:

    > Hi, Can anyone think of a way to align a bunch of images or divs of
    > random sizes into a grid where they touch border to border on both the
    > top and the left hand side? obviously float:left will align them side
    > by side but is there any way to ignore the line breaks when they wrap
    > to the following line and align flush with the image above? It's hard
    > to explain but its quite a simple concept.


    If there is a landscape on the far left and a portrait that is
    taller than the landscape next and so on on one line, then if you
    wrap to the next line and the first pic in the wrap to touch the
    first pic(in the line above)'s bottom border, what is to happen
    to the next pic on the wrap if the one above is a portrait and
    juts down?

    --
    dorayme
     
    dorayme, Jul 31, 2006
    #2
    1. Advertising

  3. CRON

    CRON Guest


    > If there is a landscape on the far left and a portrait that is
    > taller than the landscape next and so on on one line, then if you
    > wrap to the next line and the first pic in the wrap to touch the
    > first pic(in the line above)'s bottom border, what is to happen
    > to the next pic on the wrap if the one above is a portrait and
    > juts down?


    It should simply be aligned to the bottom of the image above it. I'm
    only concerned with left and top alignmend - bottom and right can be
    ragged. Also I've been thinking for this to be possible at all, the
    images must be standard widths: say 100, 200 or 400px so that 2X100px
    ones can fit into a 200 one. If this is not the case there will be gaps
    in the grid I presume.
     
    CRON, Jul 31, 2006
    #3
  4. CRON

    CRON Guest

    CRON, Jul 31, 2006
    #4
  5. CRON

    Els Guest

    CRON wrote:

    > OK, I have done up a sample of what is required::
    > http://www.crondesign.com/imagesample.gif


    That's certainly doable, but not if either the width of the
    composition, or the order and size of the images, is dynamic.

    There is no CSS rule that says "fill the gaps please".

    --
    Els http://locusmeus.com/

    Now playing: King Crimson - Starless and Bible Black
     
    Els, Jul 31, 2006
    #5
  6. CRON

    CRON Guest

    > That's certainly doable, but not if either the width of the
    > composition, or the order and size of the images, is dynamic.


    Hi thanks for the reply. Unfortunately, the width of the composition is
    dynamic. The order of images is not.
     
    CRON, Jul 31, 2006
    #6
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Nathan Sokalski
    Replies:
    2
    Views:
    459
    Eliyahu Goldin
    Jun 8, 2005
  2. Don@NoSpam

    Help with image/text alignment

    Don@NoSpam, May 30, 2004, in forum: HTML
    Replies:
    10
    Views:
    727
    Don@NoSpam
    Jun 2, 2004
  3. Adrian Bailey

    Image alignment

    Adrian Bailey, Apr 1, 2005, in forum: HTML
    Replies:
    2
    Views:
    509
    Nico Schuyt
    Apr 1, 2005
  4. Christoph

    Image alignment using CSS

    Christoph, Oct 10, 2006, in forum: HTML
    Replies:
    7
    Views:
    52,464
  5. Replies:
    0
    Views:
    87
Loading...

Share This Page