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?...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

[Rob_D]

I had this problem too. Basically you are trying to create a multi-column CSS layout which is incredibly difficult to code so that the height remains the same for all divs that contain the text. This is particulrly a problem when text-resize is used.

I went for tables in the end as it is tabualar data, but this doesn't allow for the flexibility that you need.

I am very interested to know of a good solution - can pmob help?

[Rob_D]

I did a bit of experimenting with some CSS i've never used before and found this:

div {
width:150px;
border:#999999 solid 1px; /*optional*/
display:inline-table;
vertical-align:top;
}

replace div with the class you use for each image/text combination.

This workds in Safari - I haven't tested in any other browsers.

[LJK]

Hi -
I usually work around this by setting a width and height for
each li or img - taking into acct. maximum hz. and vt. to have.

El

[iansontimes]

Yes all good solution but non fix the problem of text resizing?

[Paul O'B]

Hi,

There is not much you can do about this except set a height big enough to cover this eventuality. You could of course set the height in ems to accomodate the re-sizing of text.

In browsers that support display:inline-table you could use Robs solution but i think only OPera9 and safari support it.

For ie5 - 7 you could do use this technique which relies in display:inline-block and the code must be exactly as shown otherwise it won't work,

http://www.pmob.co.uk/temp/caption23.htm

The display:inline and display:inline-block must be in separate style blocks for this technique to work.

[Kravvitz]

I don't see the need for display:inline-table;. Wouldn't display:inline-block; be better?

The fix for IE that Paul used is explained here:
A TripSwitch? - set hasLayout to true without a dimension
IE/Win: inline-block and hasLayout

[markbrown4]

You could of course set the height in ems to accommodate the re-sizing of text.

This is what I do, it works well for me

[Paul O'B]

Hi Kravvitz,

The fix for IE that Paul used is explained here:

Thanks for pointing to the explanation . I originally read it from Clare at Tanfa who actually discovered it but I'd not seen that other link.

It's very informative but I think the last line needs some clarification.

Elements having both hasLayout and display:inline work similarly to the standard inline-blocks:

That's not quite true as height and width will cause the element to have "layout" but it will not turn the element into an inline block when display:inline is added.

e.g.

p{height:1%;width:100px;}
p{display:inline}

That doesn't work but either of these do.

p{zoom:1.0;width:100px}
p{display:inline}

or

p{display:inline-block;width:100px;}
p{display:inline}

The important bit is that inline elements do not generate layout when height and width are added so therefore it is only the other "haslayout" triggers that are viable.

I suppose their final statement is actually true in that only elements that have "layout" and display:inline will act this way but omits to mention that height and width don't count in this instance because the display inline nullifies them from triggering "haslayout".