Vertical and horizontal distribution (Re: Alignment property proposal)

> David Baron

> (And, frankly, I'd rather see what your proposal solves addressed
> by a flexible box model.)

A very common request is to visually center one block within a containing  
block vertically or horizontally, and I expect that by the time CSS3 is  
done it should handle both cases more or less intuitively.

I would wish that whatever mechanism is chosen should handle the case of  
two or more contained blocks as well, or at least not preclude support for  
it in a future version of CSS. This is very common in presentations and  
not uncommon in other layouts.

If you have:
  <container>
   <item id="A"/>
   <item id="B"/>
   <item id="C"/>
  </container>

it should be possible to have a generalisation of margin: auto that will  
split the margin between the items with predefined dimensions and  
constrain the dimensions of the containing block to calculate the items  
without.

A novice designer would do something like this and not unreasonably expect  
it to work, and be frustrated when it sometimes work (for the horizontal  
case) and never works (for the vertical case):

<table height="100%" width="100%" id="horizontal">
  <tr>
    <td><item id="A"/></td>
    <td><item id="B"/></td>
    <td><item id="C"/></td>
  </tr>
</table>

<table height="100%" width="100%" id="vertical">
  <tr><td><item id="A"/></td></tr>
  <tr><td><item id="A"/></td></tr>
  <tr><td><item id="A"/></td></tr>
</table>


A more sofisticated designer knows that CSS Cures Cancer, remove the  
superfluous layout elements 'table', 'tr', and 'td' elements, so to just  
write

   container {display: table}
   container item {display: table-row}    /* for the horizontal case, or */
   container item {display: table-column} /* for the vertical case */

and be even more frustrated.

-- 
Jonny Axelsson, Core Technology, Opera Software AS

Received on Wednesday, 7 November 2007 09:15:10 UTC