Comments on: Tableless Image Gallery – An Experiment of Fluid Grid

By: Katya

Katya — Mon, 20 Jul 2009 21:12:42 +0000

Hi, thanks for your nice example.
Do you have any hints how to use such floated grid for the elements of different height?
I mean to make in work in IE6 and 7?

By: Sanj

Sanj — Mon, 16 Jun 2008 13:34:13 +0000

Hi interesting stuff! I was wondering, can you not create a grid without borders, so that the image edges actually touch each other. (For example, like the 'Friends Grid' in Facebook). Have you got a code for that?

All the best.
Sanj

By: Sirus Coder

Sirus Coder — Thu, 29 May 2008 16:34:32 +0000

This looks great and will work well for my website, so thank you for writing it and making it look good.

To Scott and Deborah, I think the idea here is that all the images will be of the same size (created as thumbnails) and all the captions will be constrained to a set number of lines. I am going to stick to a single line of caption and if it appears to extend over the single line, I plan on truncating the text. For example:
Caption: The quick brown fox jumps over the lazy dog
I would display this as: The quick brown fox j...

The thinking is that these boxes would serve as quick identifiers of what you want to click on and not entire packages of information:)

Just my thoughts. Again good work!

Sirus

By: Deborah Whipp

Deborah Whipp — Sun, 23 Mar 2008 05:30:03 +0000

I love this and am using it on a site I'm working on. However, one of my images has a 3-line caption while the rest have 2 and this does result in a gap.

Here's the css I'm using:

.album{ width:100%; background-color:#ffffff; padding:0px; float:left }
.album .imageSingle { float:left; margin:5px; width:135px; text-align:left; }
.album .imageSingle .image { width:88px; height:113px; margin:1px; text-align:left; }
.album .footer { font-family:verdana,arial,sans-serif; font-size:11px; text-align:left; width:120px; color:#3d3e5d; font-weight:normal; padding-top:0px; padding-bottom:5px; margin-top:0px; }

Have you had any luck with this issue?

By: Scott Harvey

Scott Harvey — Sat, 23 Feb 2008 23:06:55 +0000

The one major limitation with this type of grid is if you have a caption that takes a couple of lines or a tall image the layout will break.

This has been the main reason why I have stuck with using table for this type of thing, do you have a solution for this?

By: roman

roman — Fri, 28 Dec 2007 10:27:20 +0000

i'll try it