Do you have a question? Post it now! No Registration Necessary. Now with pictures!
- Posted on
- Rennie deGraaf
May 18, 2005, 3:28 am
rate this thread
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/~degraaf/test/index3.html ),
I have a bunch of (red-bordered) DIVs containing an image thumbnail and
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.
it possible with only CSS?
Re: Forcing adjacent elements to have the same height
I tried implementing the same page using inline-block
(http://pages.cpsc.ucalgary.ca/~degraaf/test/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
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?