Forcing adjacent elements to have the same height

[Rennie deGraaf]

Is it possible to force adjacent block elements to have the same height,
without specifying that height?

In this page (http://pages.cpsc.ucalgary.ca/~degra...t/index3.html),
I have a bunch of (red-bordered) DIVs containing an image thumbnail and
a caption. These DIVs are floated to the left, and I used JavaScript to
center them (since there is no float: center and most browsers don't
support display: inline-block). I know the dimensions of the
thumbnails, so I can code the width into the stylesheet, but the
captions are script-generated, so I don't know the height of the
caption. Since I don't know the width of the browser window, I don't
know how many DIVs will fit on a row. I do, however, want all DIVs on
the same row to have the same height, which must be at least great
enough to enclose the longest caption in that row. It will be
sufficient if all of the image DIVs on the same page have the same height.

What I'm really trying to accomplish is to force these DIVs into rows
from the left edge to the right edge, with no gaps. If there's some
other way to accomplish this, please let me know.

Now, I known that I can do this with JavaScript or a table layout. Is
it possible with only CSS?

Thanks,
Rennie

[Spartanicus]

Rennie deGraaf <ca.ucalgary.cp sc@degraaf> wrote:

These DIVs are floated to the left, and I used JavaScript to
center them (since there is no float: center and most browsers don't
support display: inline-block).

IE 5.5+, Safari, iCab 1.3+ and Opera 7+ all support inline-block. Of the
modern browsers only Gecko based browsers do not support it.
http://www.spartanicus.utvinternet.i...h_captions.htm

--
Spartanicus

[Rennie deGraaf]

Spartanicus wrote:

Rennie deGraaf <ca.ucalgary.cp sc@degraaf> wrote:

These DIVs are floated to the left, and I used JavaScript to
center them (since there is no float: center and most browsers don't
support display: inline-block).

IE 5.5+, Safari, iCab 1.3+ and Opera 7+ all support inline-block. Of the
modern browsers only Gecko based browsers do not support it.
http://www.spartanicus.utvinternet.i...h_captions.htm

I tried implementing the same page using inline-block
(http://pages.cpsc.ucalgary.ca/~degra.../index4.html); in Konqueror,
the bottoms of the thumbnail DIVs are aligned correctly, but the tops
aren't aligned any more. Opera 8 gives the desired effect, but appears
to have some rendering bugs (it looks like the top of relatively
positioned elements is taken from the margin-top rather than the
object-top, or something). Of course, it doesn't work at all in
Firefox, and I haven't tested MSIE.

Mozilla's bug on support for inline-block has been open since 1999, so
I'm not optimistic on them supporting it any time soon. Since I use
Gecko-based browsers myself, I'm looking for another way to get similar
effects.

I took a look at your Mozilla workaround page, but it seems that the
layout breaks as soon as a comment wraps around onto a second line
(assuming that your limit the width of the caption cells). I tried
something similar myself
(http://pages.cpsc.ucalgary.ca/~degraaf/test/index2.html) and
encountered the same problem. Any idea on how to fix this?

Rennie

[Spartanicus]

Rennie deGraaf <ca.ucalgary.cp sc@degraaf> wrote:

I took a look at your Mozilla workaround page, but it seems that the
layout breaks as soon as a comment wraps around onto a second line
(assuming that your limit the width of the caption cells). I tried
something similar myself
(http://pages.cpsc.ucalgary.ca/~degraaf/test/index2.html) and
encountered the same problem. Any idea on how to fix this?

The Mozilla work around is a method I do not support. The way to get
captions to wrap would be to specify a width for the <th>s, to get the
tops to align you'd then specify table{vertical-align:top}, the latter
triggers a bug in Gecko.

--
Spartanicus