CODEWITHSUNDEEP
htmlcss
Lucifix
Lucifix

Reputation: 11

Display images in multiple rows based on div width

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?

Upvotes: 1

Views: 10672

Answers (3)

Daniel Vassallo
Daniel Vassallo

Reputation: 344431

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.

Upvotes: 1

graphicdivine
graphicdivine

Reputation: 11211

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}

Upvotes: 0

cletus
cletus

Reputation: 625247

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.

Upvotes: 1

Related Questions