Evenly dispersing list items or div blocks

cadkins23

This page http://dirtyladle.socialengine.com/ contains a large list of images and there are no blank spaces which is exactly how I want my site to look. The images seem to fill all the open pieces areas. When I try to do something similar which can be seen by going to Stoners.o-r-g (remove dashes), I end up with 3 on the first row which is great, and then an empty space on the 2nd and/or other rows.Must have something to do with different image sizes or div sizes although I'm not sure what to do in order to achieve no empty spaces.

What I am referring to is not an issue with the resultset but perhaps a layout issue.

I've tried copying the first site's CSS rules but that didn't seem to fix the problem. Anyone know a secret to making these items stack without occasionally leaving empty spaces? I simply want to output images, with title, comments, etc. and have them fill the spaces so if the browser is wide or not as wide the number of columns may change but no empty spaces will be seen in the layout.

Thanks

dalecosp

Well, that's a pretty big issue these days in the design world. Are you sure about "no blank spaces"? When I look at the dirtyladle site I don't see even column heights in Chrome. Looks to me as if it's all floated inside a max-width'd container ...

dalecosp

Sorry, sorry ... min-width, not max...

He's pretty up on stuff CSS, I think. I've only recently discovered "Screen" and friends....

NogDog

Approach I've used is to (in this case) create 3 container div's (or even 3 table columns -- gasp!). Then I put the data that determines what gets displayed into an array. Next get the array count(). Divide that number by 3 and round up if not a whole number. Then use array_chunk() to split that up into 3 arrays, at which point you're ready to loop through each of those 3 sub-arrays to output their contents into their respective columns, something like:

<div id='wrapping_div' style='overflow:auto;'>
<?php
foreach($chunkedArray as $chunk) {
  echo "<div class='whatever'>";
  foreach($chunk as $contents) {
    echo "HTML and data for this particular item, using the data in \$contents";
  }
  echo "</div>";
}
?>
</div>