Previous Message
Next Message

thumbnail gallery with captions

Sent by Zoe M. Gillenwater on 1 February 2007 20:08

David Sharp wrote:
> Trish Meyer wrote:
>> I do pics and captions for an art gallery, but each image is in its 
>> own floated div - as in
> Thanks for replying Trish,
> This is a good solution and probably what I will have to end up going 
> with, but it does have two drawbacks compared to what I would /ideally/ 
> like to have. Firstly each "picturebox" is the same defined width - I 
> guess to create the illusion that they are centered when really they are 
> floated left. I would prefer the picturebox to be the width of the image 
> plus padding. Secondly (although I guess pretty much related to the 
> first) is that this solution again would look very "left aligned" when 
> dealing with either a variable number of images, or conversely a fluid 
> container width.
> Is there no way to do this inline, or conversely simulate a kind of 
> {float : center}?

Georg already addressed your concern about the overall left alignment of 
the gallery.

I wanted to address your concern about having a fixed width on each div 
that holds a photo, instead of leaving it widthless and having it 
shrinkwrap to the size of the picture. You can do this, but it doesn't 
work well if you have a caption within the div. If the caption grows 
wider than the photo, so will the div. This is why you usually see divs 
holding both photos and captions fixed in width. You'll often see the 
divs fixed in height as well (as the Eric Meyer-based examples cited 
earlier were) but this is problematic because the caption text can grow 
longer or larger and excede that height. The heights are set, though, to 
keep subsequent floats from catching on one another.

You could consider creating two classes, one called portrait and one 
called landscape, and setting the widths in these. I do a similar sort 
of thing in most of my sites where I float images within the text. I 
generally develop two set sizes for horizontal and vertical images 
respectively, and apply these classes to the image divs.

You'll still need to worry about the height issue, though. Using Georg's 
suggestion of inline-block gets around that:


Zoe M. Gillenwater
Design Services Manager
UNC Highway Safety Research Center

css-discuss [EMAIL-REMOVED]]
IE7 information --
List wiki/FAQ --
Supported by --
Previous Message
Next Message

Message thread: