Centered grid of small images from UL?

Discussion in 'Web Design and Development' started by Makosuke, Oct 5, 2008.

  1. Makosuke macrumors 603

    Joined:
    Aug 15, 2001
    Location:
    The Cool Part of CA, USA
    #1
    I'm working on something I've run into more than once, and I'm wondering if there's some nifty solution I'm overlooking.

    Basically I've got a page with several small image logos at the bottom that the designer wants to show up in a sort of grid-like pattern (say, two rows of five 200x200 images each) centered on the page. In my mind it makes the most sense to mark this up as an unordered list, because that's what it is, but use CSS to restyle it.

    Except I can't seem to figure out any clean way to do this. I can easily enough float them to either side, but then they end up left or right justified. I can set an explicit width, which would let me manually "justify" them, but that only works if I know how wide the containing element will be--no room for liquid layouts.

    The real issue is that I can't think of a good way to center them if they're unbalanced (say, a row of five and one of four) or if they layout is liquid (9 items, and I don't know where they will break unless I do it manually). Again, I could tweak the stylesheet manually to set margins if I know how many will be in a row, but I then have to do that for every row if they're not all the same number of items, and I also have to break it up into multiple lists.

    Any suggestions for the best way to do this? Set them inline and use an external element to center or justify the block of "text"?
     
  2. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #2
    I've never come up with a 100% fluid solution. I always had to set the number of columns specifically and just have those items expand and compact together as the browser changed. It was usually acceptable as the layout was never 100% layout, so the images didn't need to be 100% fluid. I usually have some min-width and max-width set to constrain the level of fluid-ness.

    Some of the CSS can be adjust dynamically with JavaScript, but that seems to be a bit of a hassle.
     

Share This Page