Anonymous 0

I need to arrange some links with logos in a grid.

they need to be vertically aligned to the bottom of the grid.

each row should only be as tall as the tallest image in the row

I can't think of an easy way to do this, as the image height is not fixed, only the width will be constrained by the uploader and I have no control over which images will be used.

a sample of the sort of layout I need is at the url right.

has to work in IE6

6 answers


Assuming you know the maximum height an image would be, you could float a series of elements with that height, and absolutely position the image/link inside the floated element anchored to the bottom.

Something like this:

<style type="text/css">
li {
    height: 200px; /* the maximum image height */
    width: 200px;
    float: left;
    position: relative;
li img {
    position: absolute;
    bottom: 0;
    left: 0;

    <li><img src="foo.png" alt="bar" /></li>
    <li><img src="foo.png" alt="bar" /></li>
    ... etc ...
Answered almost 8 years ago by Dwayne Anderson
  • that's where I'm headed I think - but the height issue is a problem. I don't think it's possible without defining a height, and the designer doesn't really want to do that - as then everything has to be on a grid with fixed height rows - even short images Tony Crockford almost 8 years ago
  • I see now that you mention that only the width will be constrained buy the uploader... That is unfortunate indeed. Dwayne Anderson almost 8 years ago
  • If a maximum height can not be determined, I would loop our good buddy JavaScript into the discussion... Dwayne Anderson almost 8 years ago

If you are displaying an indeterminate number of images, then I presume that you are using php or some other server-side language. Therefore it should be possible (using a graphics library) to read the height of each image into an array as you assemble the page and make decisions based on that. (You might want to optimise layout by sorting the tallest images into the same row of the grid, etc.)

For greatly reduced server load, measure the images only once, at upload time, and store this information in a database.

Answered almost 8 years ago by Richard Grevers
  • Unfortunately I'm dependant on a cms that doesn't have full function in that respect and I'm not keen on hacking the code. Tony Crockford almost 8 years ago
Andy Ford 533

Have a look at the equalHeights jQuery Plugin. I would suggest firing it from within $(window).load(function(){});

rather than


so that it doesn't fire until the document (including all images) is loaded.

It would probably look some thing like:

Answered almost 8 years ago by Andy Ford

The easiest way might be to use a table. The rule about when to use tables is essentially this: use tables when you need a grid, but not for layout. What you describe seems to fit the definition of a grid exactly, and a table would do everything you need and would work in IE6.

You could also do what you want by using float:left on each image, but I feel like that solution would be a bit more involved.

Answered almost 8 years ago by Abinadi Ayerdis
  • The issue with a table is that I don't know if I need one row or four rows - I don't have control over how many images will be uploaded. Tony Crockford almost 8 years ago
  • Not knowing how many rows you will be using will be a problem you will also have to solve when not using tables... If what you are descripbing will be generated dynamically, i'd say, break out the PHP, and generate a table which fits the number of images you have... If the data you are displaying is a tabular (which a grid is), use a table. Thie Thomsen almost 8 years ago
gy 15

Inline-block will do exactly what you're looking for. Unfortunately it only has partial support in ie6 and 7 even though it's only css2. You could use Dean Edward's IE7.js or even Google's Chrome Frame plug-in to fix Internet Explorer.

Answered almost 8 years ago by gy

do you know if you have the GD library installed on the server? there are plenty of examples out there where you could replace your image src with a 'thumbgenerator.php' file, you then add the actual image location in the query string and set the height with another parameter. so it could look like this for each image in your table:

img src=thumbgenerator.php?src=images/yourimage.jpg&h=200

Now all the pics will be the same height no matter what. As for the layout...tables definitely. And as for calculating the # of columns, rows, etc, that can all be done dynamically if the images are stored in a database of some sort.

Your best bet is to write a function that does all this and then offer some type of short-code to be used in the CMS when you want to display one of these tables. I've done it already for the CMS we designed, happy to share & you can modify it for your own CMS.

Answered almost 8 years ago by Stephan Hovnanian