Howto create a thumbnail gallery with CSS

Thumbnails go left, text goes right of thumbnail

[Darkelve]

I'm trying to make a Thumbnail gallery, much like the ALA article on "practical css".

Only, in my case I want to have the text not at the bottom of each image, but at the right, beside each thumbnail.

Goal:

- Gallery of thumbnails + Accompanying text for each thumbnail that wrap around the page as the browser window is resized

- Small thumbnail with a custom border (1px solid #ccc) that goes to the left, some accompanying text that goes to the right. The entire page is going to be filled with these kind of 'thumbnail/text' pairs

- Some white-space in between each 'pair' (thumbnail + text)

- each thumbnail+text is just as wide as the other ones

I tried it with some floats, float the text right, but unfortunately, it floats to the FAR right of the page, and my intention is to have it right beside my thumbnail image.

Much obliged for any help or tips,

Darkelve

[zackattack]

Hi Darkelve

This can easily be acheived using a definition list, this would use floats - somthing like this:

<dl>
<dt><img src="image.jpg" width="85" height="85"></dt>
<dd>descriptive text...</dd>
<dt><img src="image.jpg" width="85" height="85"></dt><dd>descriptive text...</dd>
<dt><img src="image.jpg" width="85" height="85"></dt>
<dd>descriptive text...</dd>
</dl>

CSS:

dl {
float: left;
width: 100%;
}
dt {
clear: left;
margin: 0 0 0 0;
}
dt img {
float: left;
margin: 0 10px 10px 0;
border: solid 1px #ccc;
}
dd {
margin-left: 96px;

}

this one way, you would need to tweak this to suit your needs though
let me know if this helps..

ZA

[snurre]

Well one of the coolest looking (imho) can be found here;
[cssplay.co.uk ] or
[cssplay.co.uk ]
[cssplay.co.uk ]

Nicholls does have several others galleries around, last time I checked many of his galleries are free even for comercial use. Two of those are free.

Happy hunting.

[Darkelve]

Well, eventually I realized that my problem was easily solved by using a border-less table and some CSS...

at first I tried to put everything in a div, and float the image to the left and the text to the right... the experiment was fun, but the table approach was more straightforward in this case. After 4 years, I'm feeling like I'm finally starting to understand about CSS...