|
Posted by Rennie deGraaf on May 17, 2005, 11:28 pm
Please log in for more thread options
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
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
| 
XML Sitemap