A series of simple image tags will organize themselves nicely to their bounding box, but as soon as I try to add overlaying titles, everything falls apart.

I've asked this to people before, and I get everything from tables to floating divs, to relative positioning... hopefully this will clear it up once and for all.

What is the best way to display a grid of images and their titles?

8 answers


Cross-Browser Inline-Block

Create a cross browser class for display:inline-block. The example in the article seems very similar to what you described. I've use this approach multiple time's and it works great.
Hope this helps.

Answered about 10 years ago by Tim Correia

I'd suggest using an unordered list and CSSing the pants off it.


  <li><div><img src="..." alt="..." /><p>Image title</p></div></li>
  <li><div><img src="..." alt="..." /><p>Image title<br />Over 2 lines (ems)</p></div></li>
  <li class="fancy"><div><img src="..." alt="..." /><p>Image title<br />Over 2 lines (EMs)</p></div></li>

Then in the CSS you can restrict the width and height, or perhaps better, just the height.

ul { list-style-type: none; }
ul li { display: inline; }
ul li div { display: block; float: left; width: 100px; height: 100px; overflow: hidden; position: relative; margin-right: 10px;  }
ul li div img { height: 100px; border: 1px solid #000;}
ul li div p { display: block; width: 80px; height: 2em; position: absolute; top: 100px; left: 0; margin-top: -3em; padding: 0.5em 10px; }

Then if you wanted to get fancy you could make the title semi-transparent:

ul li.fancy div p { background-color: #000; color: #fff; filter: alpha(opacity=80); -moz-opacity: 0.80; opacity: 0.80;}

I've got a working demo up at my site if that helps.

Answered about 10 years ago by Wil Linssen

This is a pretty great article with really nice results.

Answered about 10 years ago by Jason Lemieux

Hey Matt,

It's hard to know your exact situation with out a comp of some sorts. I have had much experience dealing w/ grid style image galleries and have taken different approaches based on different scenarios. Usually I will go with the approach of floating block elements, usually a list of LI elements inside of a UL. When doing this you will want to give all of the LI elements a set width and height. This will allow them to wrap evenly and thus create a grid. Inside of each LI you can place your image tags and create your overlaying titles however you like.

I recently ran into an issue where the images had to have a variable height, so the solution ended up using a combination of "inline" and "inline-block" on the LI depending on the browser and not using float. This allowed the Images to display more like they would if they were in a table.

Hope any of this helps

Answered about 10 years ago by Efficient Pixel

Inline-level elements are very difficult to position relative to one another. Plain text and IMG tags won't get you where you want to go.

You're going to need to use some block-level elements. Jason's suggestion gives you a lot of markup to use to style your images with CSS.

If you're looking for a very simple implementation, you can go with one of the simplest HTML elements, the < P > tag.

<p>O RLY?<img src="orly_owl.jpg" /></p>

You should be able to use CSS from there to style your images and their titles to your heart's content.

Answered about 10 years ago by Brenden Sparks

It's your personal coding preference if you would like to use the floating div, floating li, or table techniques as they all show the same result to the end user.

I personally prefer to use floating divs as the div tags are interchangable with a tags if you want those elements to be links (just add display:block; to the a tag). It also results the least amount of code out of the 3 options, and is the most flexible.

Answered about 10 years ago by Kurt Zenisek

Oops, seems I forgot that you can use the the p tag also... it is interchangeable with the div tag technique, but will require display:block; in the CSS if you want the grid elements to have a set width and/or height whereas using divs will remove this need.

Answered about 10 years ago by Kurt Zenisek

The Cross-Browser Inline-Block, told by Tim Correia is probably the best answer. But inline-block property doesn't have to be cross browser (another debate ?). It is now (and for the future) a good solution to use it (or another, according what you prefer, like display:table-cell)

Answered about 10 years ago by Julien B.