Question

If I have five 32×32 pixel images in a div container I can easily make them ‘word-wrap’ left-right and organise themselves into a row of 3 images, then a row of two:

<div style="max-width:96px">
  <img src="a.png"/>
  <img src="b.png"/>
  <img src="c.png"/>
  <img src="d.png"/>
  <img src="e.png"/>
</div>

Which results in:

a b c
d e

If I reduce the max-width of the div to 64px then I will see

a b
c d
e

But, is there way that I can specify a max-height of a div and have the images organise themselves like this:

a d
b e
c

So that if the height of that containing div is actually variable the 32×32 images will stack vertically until there is no room, then start a new column?

(Ideally I would have the filled columns on the right and the unfilled column to the left, but any suggestions along these lines would be appreciated).

Thanks

Answer 1

I don’t know if that is entirely possible with regular (pre-v3) CSS. You’re fighting against the document “flow”, which will display images as inline, hence the first arrangement. You could try the CSS columns property – but that won’t work in older browsers.

There may be JavaScript solutions out there as well, but I don’t know of any off the top of my head.