Re: CSS3 idea: pad-to

Andrew wrote:

> Thanks, fantasai.

Indeed, you were correct, fantasai. Thanks.

> This appears then exactly as my 
> 
> container 
> { 
>     flow:h-flow 
> }
> container > child 
> {    
>     height:100%%; /* full height of current row */
>     width: 25%%; /* four columns if space allows*/
> }
> ...
> 
> if I get the idea right of course.

Yes. In your HTMLayout demo application, your code renders exactly as I want. 
You seem to have a massive bug in clearing floats, though -- not sure.

Here is a demo page demonstrating the differences that flexgrid makes:

   http://telcontar.net/store/hosted/lists/W3C/fluid-grid-example.html

Compare a regular browser to an HTMLayout application for the full effect.

Aside from broken clear: left in HTMLayout (!) there are several points to note.

You (Andrew) suggested this code:

  ul > li { display:inline-block; float: left }

Inline-block elements do not need to be floated (since they're *inline*) but 
I'll stick with your code to show you what goes wrong. Notice that if you 
enlarge the window to fit four cells across, the CSS2 example has hideous layout 
issues? These arise from the float stacking model and how it is affected by 
differing heights of the floated items. This is why floats are completely 
useless for this. Plain inline-block will get half-way.

Compare the HTMLayout version: now you'll see that all the cell heights match -- 
this is in fact what we wanted. inline-block won't fix this of course: you'll 
get the nice fluid grid but not the matching heights.


The real challenge then is to horizontally center either grid :)


This is only the surface. The reason I suggested adapt-size was so that you 
could do far more than this. For example, I might want to write a page of code 
examples, and have each code example div be only as wide as the widest one on 
the page.


But the %% and flow features, if made standard, would certainly solve the most 
important aspects of the fluid grid system, even if your site doesn't clarify 
that it would!

Received on Sunday, 25 February 2007 07:23:51 UTC