Previous Message
Next Message

Rows of divs all same height?

Sent by JJ on 11 January 2006 10:10


----- Original Message ----- 
From: "Ingo Chao" [EMAIL-REMOVED]>
To: [EMAIL-REMOVED]>
Sent: Wednesday, January 11, 2006 1:54 AM
Subject: Re: [css-d] Rows of divs all same height?


> JJ wrote:
>> Can this be done?  I have a fluid layout with divs laid out left to 
>> right
>> in rows.  Since the amount of text within each varies, the divs should
>> ideally be resized in terms of height, but to keep the layout neat I 
>> need
>> all divs in the same row to assume the same height.  Different rows can 
>> be
>> different heights according to the contents.
>>
>> The page is generated programmatically and can't really use tables 
>> since I
>> have no idea how many cells there would be in any given row.  This is a
>> sort of image gallery, with image thumbnails of 140 pixels wide and
>> varying amounts of text in captions below each image.
>> ...
>
>
> This cannot be solved using floats, as floats of different height do
> hook according to float rule 5+8 when the wrap into a "new line".
>
> If Mozilla would support inline-block, this would be the way to go.
>
> (Currently, this requires loads of hackery. Bruno Fassino has solved it
> here: http://www.brunildo.org/test/ImgThumbIBL.html, and I am using his
> technique on some of my pages to allow a sort of self-alignment for the
> text container, but the more complex it gets, the more hacks are needed,
> and new versions of Gecko may require a complete re-do, so this is not
> for production).
>
> If you generate it programmatically, you should definitely opt for a
> table. You said there is a given width of the elements, so the number of
> elements in the row should be determined?

Not unless I fix the table width.  I'd prefer it to fit the width of the 
window, so even though the width of each div is fixed, the number per row 
would vary with the window size.

Bruno Fassino's page looks to be exactly what I'm after.  Thanks.

______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Previous Message
Next Message

Message thread: