how to evenly space a row of images using CSS

Discussion in 'HTML' started by Greg N., May 16, 2005.

  1. Greg N.

    Greg N. Guest

    I'm new at CSS, so bear with me if this is a trivial or impossible thing
    to do.

    I have a few images that I want to place side by side, evenly spaced
    across the page, such that the right image aligns with the right edge of
    the browser window.


    <----------- browser window width ---------------->
    image1 image2 image3 image4


    That means, as the window is resized, the spacing should adapt accordingly:


    <--- browser window width --->
    image1 image2 image3 image4


    It's fairly easy to implement this with tables, but how about a pure
    CSS implementation?

    Thanks - Greg
     
    Greg N., May 16, 2005
    #1
    1. Advertising

  2. Greg N.

    Spartanicus Guest

    "Greg N." <> wrote:

    >I have a few images that I want to place side by side, evenly spaced
    >across the page, such that the right image aligns with the right edge of
    >the browser window.
    >
    ><----------- browser window width ---------------->
    >image1 image2 image3 image4
    >
    >It's fairly easy to implement this with tables, but how about a pure
    >CSS implementation?


    Not possible, with or without tables. The only way to achieve this is by
    using text-align:justify, but that only works when the content wraps.

    --
    Spartanicus
     
    Spartanicus, May 16, 2005
    #2
    1. Advertising

  3. Greg N.

    Greg N. Guest

    Spartanicus wrote:

    > Not possible, with or without tables. The only way to achieve this is by
    > using text-align:justify, but that only works when the content wraps.


    Sure possible with tables. Just align the image in the leftmost cell
    left, the image in the rightmost cell right, center the other images in
    their cells and give the cells appropriate widths in percent. Works like
    a charm.
     
    Greg N., May 17, 2005
    #3
  4. Greg N.

    Greg N. Guest

    Greg N. wrote:
    > Spartanicus wrote:
    >
    >> Not possible, with or without tables. The only way to achieve this is by
    >> using text-align:justify, but that only works when the content wraps.

    >
    >
    > Sure possible with tables. Just align the image in the leftmost cell
    > left, the image in the rightmost cell right, center the other images in
    > their cells and give the cells appropriate widths in percent. Works like
    > a charm.


    Example:

    <table width=100%>
    <tr>
    <td width=17% align=left><img
    src=http://www.icons.com/images/home2/token_GvB.gif>
    <td width=33% align=center><img
    src=http://www.icons.com/images/home2/token_heggem.gif>
    <td width=33% align=center><img
    src=http://www.icons.com/images/home2/token_grimandi.gif>
    <td width=17% align=right><img
    src=http://www.icons.com/images/home2/token_job.gif>
    </table>
     
    Greg N., May 17, 2005
    #4
  5. Greg N.

    Spartanicus Guest

    "Greg N." <> wrote:

    >> Not possible, with or without tables. The only way to achieve this is by
    >> using text-align:justify, but that only works when the content wraps.

    >
    >Sure possible with tables. Just align the image in the leftmost cell
    >left, the image in the rightmost cell right, center the other images in
    >their cells and give the cells appropriate widths in percent. Works like
    >a charm.


    Right you are, there is an alternative without using a html table, but
    it's a bit messy: http://homepage.ntlworld.com/spartanicus/justify.htm

    It's buggy in IE due to what appears to be rounding errors in adding the
    widths of the individual elements, maybe there's a hack to solve that.

    Another possible method could be to float four 25% width containers.

    Note that these methods do not allow the images to wrap if the window
    width isn't wide enough, thus you are better off choosing a different
    layout.

    --
    Spartanicus
     
    Spartanicus, May 17, 2005
    #5
  6. Greg N.

    dorayme Guest

    > From: "Greg N." <>

    > Greg N. wrote:
    >> Spartanicus wrote:
    >>
    >>> Not possible, with or without tables. The only way to achieve this is by
    >>> using text-align:justify, but that only works when the content wraps.

    >>
    >>
    >> Sure possible with tables. Just align the image in the leftmost cell
    >> left, the image in the rightmost cell right, center the other images in
    >> their cells and give the cells appropriate widths in percent. Works like
    >> a charm.

    >
    > Example:
    >
    > <table width=100%>
    > <tr>
    > <td width=17% align=left><img
    > src=*>
    > <td width=33% align=center><img
    > src=*>
    > <td width=33% align=center><img
    > src=*>
    > <td width=17% align=right><img
    > src=*>
    > </table>


    This *nearly* satisfies you wanting "to place side by side, evenly spaced
    across the page, such that the right image aligns with the right edge of
    the browser window" but it is not strictly even between each pic. In a 900px
    wide table the lengths would go 40,110,130,40,130,130,40,130,110,40 where 40
    are your pics and the rest the distances from edges of same.

    ("evenness" might be had or simulated by changing the balance of percentages
    of the cells.)

    I have so often ended up using tables for similar requirements. But am
    interested in your question.

    dorayme
     
    dorayme, May 17, 2005
    #6
  7. Greg N.

    Greg N. Guest

    Greg N., May 17, 2005
    #7
  8. Greg N.

    Greg N. Guest

    Greg N., May 17, 2005
    #8
  9. Greg N.

    Spartanicus Guest

    "Greg N." <> wrote:

    >>> http://homepage.ntlworld.com/spartanicus/justify.htm

    >>
    >> I'd say that's exactly what I was after. Thanks.

    >
    >Hmm... this is CSS2 stuff, isn't it?


    A mix of css 2.0 (table values) and 2.1 (inline-block value).

    The table values are used by proper browsers (Opera, Gecko and KHTML
    browsers), IE5.5+ uses the inline-block value.

    --
    Spartanicus
     
    Spartanicus, May 17, 2005
    #9
    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. Shuo Xiang

    Stack space, global space, heap space

    Shuo Xiang, Jul 9, 2003, in forum: C Programming
    Replies:
    10
    Views:
    2,914
    Bryan Bullard
    Jul 11, 2003
  2. Christian Seberino
    Replies:
    21
    Views:
    1,680
    Stephen Horne
    Oct 27, 2003
  3. flamesrock
    Replies:
    3
    Views:
    620
    gene tani
    Jun 7, 2005
  4. PromisedOyster
    Replies:
    0
    Views:
    1,616
    PromisedOyster
    Nov 23, 2006
  5. oyster

    do replacement evenly

    oyster, Jun 2, 2009, in forum: Python
    Replies:
    3
    Views:
    278
Loading...

Share This Page