2 replies [Last post]
member101
Offline
Regular
Last seen: 14 years 17 weeks ago
Joined: 2005-07-31
Posts: 11
Points: 0

Hi,

I'm working on a website which is displaying a thumbnail gallery. The link is http://www.scottst.net/ucdo/photos.php?album_id=30 but I'll try and explain my problem as much as possible.

I've put all the images inside a div which is stretched to 95%. Each thumbnail is in its own div which is floated left. All works fine when the browser window is narrow. However, when I stretch it past a certain point, some of the images go onto a line by themselves and are aligned with the 3rd or right 'columm'. Can anyone suggest where I might be going wrong?

Selected code is below:


hgkjg
jhgjk

hgkjg
jhgjk

hgkjg
jhgjk

...etc

I've tried a load of settings (like text-align:left, setting the width on the thumbs) but I'm getting nowhere.

Can anyone help?

Many thanks

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 8 years 24 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

You can see what is

You can see what is happening if you turn on outline block level elements (Firefox web dev toolbar).

A float tries to position itself as high as possible without its top edge being higher than the top edge of any preceeding float (actual rules, in particular #2 & #9). The outline will show you that some thumbnails are shorter than others. The float is appearing under the shorter items.

To get free floats to organise themselves neatly you really want them all to be the same height.

member101
Offline
Regular
Last seen: 14 years 17 weeks ago
Joined: 2005-07-31
Posts: 11
Points: 0

That's it exactly. Many

That's it exactly. Many thanks for replying. And also for the tip about the toolbar - quite useful!