Question

I have a php script that queries a database for images, and then outputs the images onto the screen with a foreach loop. All the images have the same width, but different heights. I want to display these images in 2 columns. The foreach loop means that I can’t explicitly define two columns in the html and place the images into the column. As I have it now on the site, each image is floated left, but this creates awkward vertical spaces between images of different heights.

Not sure if I’m explaining this well, so here’s a jsfiddle that shows what I have now and what I want it to look like. In here I have coded each item so that it look right, but when it’s live I wont know each images height or be able to change it.

If there is a way to put two columns directly in the html, it needs to output the images like so, which is counterintuitive for a loop in columns:

1 2

3 4

not

1 3

2 4

Ideally I wont need to use some odd php or javascript workaround, but instead will be able to just edit the css for the image boxes

.img_box {
  float: left;
  width: $img-width;
  max-height: 600px;
  padding: 0px 0px 0px 20px;
  margin-top: 20px;
}
.rate_img {
  width:$img-width;
}

php after pulling image info from database

foreach ($result as $row) {
    echo '
     <div class="img_box">
        <a href="' . $row['file_loc'] . '"rel="lightbox[main]" title="' . $row['name'] . '" >
            <img src="' . $row['file_loc'] . '" class="rate_img" />
        </a>
     </div>';

Answer 1

I think it’s impossible to get the effect that you want in just html and css.

To fill up the available white-space you would need to use something like javascript, take a look for example at the jQuery Masonry plugin (there are probably jQuery-less options as well…).