Re: Adaptive size determination

David Woolley, 2007-02-23:
>> My basic concept is a way to arrange for every item of a given  
>> selector to be
>> set to the same size (width, height or both). This allows for  
>> beautiful fluid
>> grids that adapt to user preferences as well as a variety of other  
>> nice tricks.
>
> This conflicts with the normal implementation of CSS, which is that
> elements look up their CSS, rather than the CSS looks up the elements.

I wonder whether this could work:

   <gallery><img/>...<img/></gallery>

   gallery     {display: fluid-table;}
   gallery>img {display: table-cell;}

Without a width constraint on the |fluid-table| it works just like a  
normal |table| with an anonymous |table-row|. All |table-cell|s have  
the same height, but only coincidently the same width.

With a calculated width the height of he cells remains the same, but  
their width is set to the largest one amongst them plus the remainder  
of their containing block's width distributed evenly among the  
largest integer number of cells fitting in one row, e.g. in a 800px- 
wide gallery with the broadest image having 180px there would be  
three per line and each in a box of 200px total width (|margin| does  
not apply to |table-cell|, but borders would have to be considered).  
The maximum width of cells is the one of the table, they are shrunk  
or cropped if necessary, the table is not expanded. With |table- 
layout| set to |fixed| only so many cells would have to be looked as  
to reach the table width once, otherwise in the worst case scenario  
the table would need to be reflown or delayed until the width of the  
final cell has been determined.

|:nth-row()| and the like should work, although there are no true  
rows here.

> Also, what happens if one li has a higher priority rule.

All boxes inside a |fluid-table| that are not |table-cell|s are put  
into an anonymous |table-cell|.

Received on Friday, 30 March 2007 13:28:56 UTC