Goal: Display a group of thumbnails that are all vertically and horizontally centered in their containers (likely list items) in a fluid width page. Each container is 100px wide, so if the viewable area of the page is 660px wide, 6 thumbnails will be displayed per row. The problem which I'm sure you've guessed is that if we use a standard left float, we'll end up with a gap on the right side of the page until we have 100px or more of available space at which time we'll get another thumbnail in each row. Ideally however, the thumbnails in the row would either center until there is enough room or better yet, be spaced evenly apart until there is room for another thumbnail in the row. Like I said, I'm almost certain this cannot be done without using javascript but I thought it would be interesting to see if anyone else can come up with anything.
This should be possible. You need just to style each row to be centered and voila there's no gap. See above. This, however, will require JavaScript or some little PHP tweak.
The horizontal and vertical centering isn't the hard part, the hard part is obviously the last bit. I should note though, that the goal is to have the site fluid even when the browser is resized - meaning php is a no go. I know it can be done in javascript, but I'm hopeful some CSS Ninja with powers far beyond my own has the wisdom to say it can or cannot be done with absolute certainty.
Greg - I'm at the missus place, and she's at work, so I'm using an old win98 pc. It's got firefox 1.5 installed though, so I've had a crack for you. This is pretty untested, and I've written it off the top of my head so you'll need to test, add doctypes yadda yadda. Seems to work for me moreorless though. Oh, and excuse the garish colours... Does this help? <html> <head> <style type="text/css"> <!-- #main { float: left; width: 390px; background-color: #ff0; } .blockOuter{ position:relative; left:50%; clear:both; text-align:left; float: left; } .blockInner{ position:relative; left:-50%; text-align:left; } .blocks { float: left; background-color: #f00; margin: 5px 5px 5px 5px; height: 50px; width: 50px; } --> </style> </head> <body> <div id="main"> <div class="blockOuter"> <div class="blockInner"> <div class="blocks"></div> <div class="blocks"></div> <div class="blocks"></div> <div class="blocks"></div> <div class="blocks"></div> <div class="blocks"></div> <div class="blocks"></div> <div class="blocks"></div> <div class="blocks"></div> <div class="blocks"></div> <div class="blocks"></div> <div class="blocks"></div> <div class="blocks"></div> </div> </div> </div> </body> </html> Code (markup):