Re: layout idea

> div {
>  display: table;
>  table-rows: 5 / 1em * 3* 20px 4em;
>  table-columns: 5 / 20px;  /* Pattern could repeat */
> }

The more I look at it, the more I like the syntax defined in the Grid  
Positioning Module (whether it's table-rows or grid-rows makes no  
difference to me):

table-rows: * * (0.5in * *)[2];

I like that repeating patterns (for things like gutters) can be  
defined. I'm not sure that the number of rows or columns needs to be  
explicitly defined as you have it above.

> Pseudo-elements on the object acting as the table could address the  
> anonymous rows, columns and cells.

I like the pseudo-elements.

> For source-order independence, you could use a new property to place  
> an object inside one of the anonymous cells.
>
> #myContent {
>  table-position: cell(1, 2);
> }
> For spans:
>
> .myCell {
>  table-row-span: 2;
>  table-column-span: 3;
> }

How about a combined shorthand syntax, similar to what I defined in  
Matrix?

table-position: cell(1,2, 3,5);
table-position: cell(1,2) span(2,3); /* not sure I love this but just  
an example */

> Absolute positioning when the table is the containing block could  
> support rows and cols units to also allow out of flow positioned  
> objects to align with specific cells.
>
> #myPositionedObject {
>  position: absolute;
>  left: 3rows;
>  top: 5cols;
> }

I agree with Tab that the use of gr units makes sense and seems in  
line with what you've suggested before.

Now, what about this scenario?

<div id="out">
   <div id="in"></div>
</div>

#out { table-position: cell(1,1); position:relative; }
#in { table-position: cell(2,2); position:absolute; }

Is #in relative to #out (ignoring table-position) or relative to table- 
position (ignoring container element)?

Another scenario:

#a { table-position: cell(2,2); float:left; }

How do you contain the float? Maybe with pseudo-elements? Like so:

::table-cell(2,2) { overflow: hidden; }

Which leads me to ask, if I've got a cell(2,2) but you try and define  
a span on an element positioned from that cell, how would you handle  
overflow set to only one cell? Maybe overflow gets ignored? Or maybe  
it only applies when the cell/span is the same as the pseudo-element?  
Example:

#a { table-position: cell(1,1, 2,2); }
#b { table-position: cell(1,1, 1,1); }
::table-cell(1,1, 1,1) { overflow:hidden; }

Then overflow would get clipped for anything in #b but not in #a. (I'm  
not loving this, btw...just trying to think through the possibilities.)

-js

Received on Thursday, 19 March 2009 04:56:57 UTC