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:
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?
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.
That's it exactly. Many
That's it exactly. Many thanks for replying. And also for the tip about the toolbar - quite useful!