Display images in multiple rows based on div width

Question

Hi,

I would like to display multiple rows based on div width.

Something like that:

<div style="width: 100%">
  <div style="width: 300px"><img src="img1.jpg"><br />Image name 1</div>
  <div style="width: 300px"><img src="img2.jpg"><br />Image name 2</div>
  <div style="width: 300px"><img src="img3.jpg"><br />Image name 3</div>
  <div style="width: 300px"><img src="img4.jpg"><br />Image name 4</div>
  <div style="width: 300px"><img src="img5.jpg"><br />Image name 5</div>
</div>

So if layout width is 600px it will display only 2 images per row, if 900px - 3 images per row.

Anyone have any suggestion for me?

Answer 1

This is normally tackled by applying the float: left style to your internal divs, as in the following example:

<div style="width: 100%; overflow: hidden;">
  <div style="width: 300px; float: left;">...</div>
  <div style="width: 300px; float: left;">...</div>
  <div style="width: 300px; float: left;">...</div>
</div>

You should also apply the overflow: hidden trick on the container div to solve the problem described in this Stack Overflow post: CSS container doesn’t stretch to accomodate floats.

Answer 2

Assuming:

<div id="outer">
  <div><img src="img1.jpg><br/>Image name 1</div>
  ...
</div>

Try:

#outer { overflow: hidden; }
#outer div { float: left; }

The overflow: hidden is important because it stops the outer div from collapsing to height 0 because it contains nothing but floats.

Answer 3

Try this:

HTML

<ul class="gallery">
    <li><img src="#1" alt="1"/><br/>Title 1</li>
    <li><img src="#2" alt="2"/><br/>Title 2</li>
    <li><img src="#3" alt="3"/><br/>Title 3</li>
</ul>

CSS

.gallery {list-style: none}
.gallery li {list-style: none; display: inline;}
.gallery img { vertical-align: middle}