Float Left Obstruction

[iansontimes]

Dear All,

I am working on a small image gallery using XHTML and CSS. However, rather unfortunately I have fallen upon a slight stumbling block. This one is quite difficult to explain verbally so I have included the following screenshot which should help explain things.

Screenshot available via:
http://www.freeuploader.com/out.php?i=47829_screenshot.gif

Basically I am using float left just to give the gallery an air of flexibility. Although as you can see from the screenshot, images to get ‘jammed’ unless all the image captions are of a similar length. Is there a way to prevent this without ‘fixing’ the layout or leaving copious amounts of white space?

Kind Regards
Les

[bathurst_guy]

There's a huge range of photo galleries using CSS here (http://www.cssplay.co.uk/menu/index.html) if your interested in utilising any of them.

[iansontimes]

Thank you 'bathurst_guy' I am aware of the recourses available at ‘CSS Play’ but I am really interested in solving this own problem. Sense of self-achievement, etc..

[bathurst_guy]

No problem. Although I don't really see how it is a self-achievement if someone else solves it for you.

Does anyone have any ideas or solutions for iansontimes query?

[Centauri]

Without seeing the code, I would assume the graphic and text are within a container, and it is this container which is floated. About the only way around this is to set the height of the floated containers to a value which will allow the maximum expected text. There would be additional space under those images which have small captions.

Cheers
Graeme

[iansontimes]

Using a fixed width would return undesirable results when the size of the caption text is increased. Any fix?

[Centauri]

Container height could be specified in ems to allow for text resizing.

Cheers
Graeme

[iansontimes]

Wow that’s by far the best solution I have come across and so simple!

Thank You Centauri 'Centauri'!

I tried it and it’s not perfect as the text resizes more then the width so it’s not perfect but still very nice. Are there any enhancements to that?

[Centauri]

If both width AND height were specified in ems, it would cater to text resizing better, but could then resize too small for images if text size is reduced. However setting a minimum width may work ok here.

Cheers
Graeme

[toicontien]

I've had to kind of "cheat" before and use a clearing HTML tag every so many items. For example, I want 5 items per row, so after the fifth item I put:
<div class="spacer">&nbsp;</div>
The .spacer class has the following styles:
.spacer {
clear: both;
font-size: 1px;
height: 1px;
overflow: hidden;
}
I know you don't want to restrict the width, but for consistency's sake, and for ease of implementation, I always use a set pixel width. Sometimes I just don't have the time to make things slick and expandy-like when I've got to get something done yesterday. :)