Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

Makosuke

macrumors 604
Original poster
Aug 15, 2001
6,816
1,548
The Cool Part of CA, USA
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"?
 
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.
 
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.