W3C home > Mailing lists > Public > www-style@w3.org > November 2005

Re: Java style layout managers for CSS

From: Andrew Fedoniouk <news@terrainformatica.com>
Date: Thu, 10 Nov 2005 00:15:03 -0800
Message-ID: <01a001c5e5ce$da7a9ee0$3201a8c0@Terra>
To: "Matthew Raymond" <mattraymond@earthlink.net>
Cc: <www-style@w3.org>

----- Original Message ----- 
From: "Matthew Raymond" <mattraymond@earthlink.net>

>> flow:h-flow
>>    - this is close to Java's FlowLayout [1],
>>      blocks layouted horizontally until space
>>      allows consequently forming rows;
>
>   Couldn't you just style the child elements "display: inline-block"?

"Me thinks" that you are not reading the message in the whole :)

As I mentioned :

"Main differences of horizontal flows from
existing methods like display:inline-block or
float: left are:

1) margin collapsing between blocks works
     in both directions - vertical and horizontal.
     ( On screenshot above each child block
        has margin:20px set)
2) all blocks in row having height:auto
     (or 100%% in my case) are getting the
    same final (computed) height. "

Please "think through" both statements above.

>  It also sounds like you can simulate the latter with "display:
> table-cell" and some creative selectors...


No way. Maximum what you can get with table related
attributes is 'border-spacing' but this apply to the whole
assembly of contained elements as single value and
it is same for both directions, sic.

One more illustration:

<select> at bottom of
http://www.terrainformatica.com/htmlayout/images/selects2.jpg
has flow:h-flow and varying number of columns (depends on the
width of the select)

> -moz-box-orient

It is a half of solution or even less as far as I can see.
Probably I cannot find clear definition of it?

And probably this
http://www.terrainformatica.com/htmlayout/flow.whtm
will help to understand better what I mean.

Best regards,

Andrew Fedoniouk.
http://terrainformatica.com



----- Original Message ----- 
From: "Matthew Raymond" <mattraymond@earthlink.net>


>
> Andrew Fedoniouk wrote:
>> I am experimenting with Java style layout managers in CSS
>> and use home grown 'flow' style attribute for defining layout
>> type.
>>
>> So far 'flow' gets following values:
>>
>> flow:vertical
>>    - standard layout of <div> element.
>>
>> flow:horizontal
>>    - same as above but child blocks layouted
>>      in horizontal direction forming single row;
>
> /me coughs in a manner that sounds remarkably like "-moz-box-orient".
>
>   It also sounds like you can simulate the latter with "display:
> table-cell" and some creative selectors...
>
>> flow:h-flow
>>    - this is close to Java's FlowLayout [1],
>>      blocks layouted horizontally until space
>>      allows consequently forming rows;
>
>   Couldn't you just style the child elements "display: inline-block"?
>
>> flow:v-flow
>>    - this is close to column layout,
>>      blocks layouted from top to bottom.
>>      On vertical overflow they are wrapped into new column;
>
>   Hmm. Might be able to simulate this with CSS3 multi-column-related
> properties, but not easily.
>
>> Screenshot of  h-flow layout is here:
>> http://terrainformatica.com/w3/h-flow.jpg
>>
>> Each "flowed" container declared as:
>>
>> <div class="container" >
>>       <div class="sub">#1</div>
>>       <div class="sub">#2</div>
>>       <div class="sub">#3</div>
>>       <div class="sub">#4</div>
>>       <div class="sub">#5</div>
>> </div>
>>
>> Main differences of horizontal flows from
>> existing methods like display:inline-block or
>> float: left are:
>>
>> 1) margin collapsing between blocks works
>>      in both directions - vertical and horizontal.
>>      ( On screenshot above each child block
>>        has margin:20px set)
>> 2) all blocks in row having height:auto
>>      (or 100%% in my case) are getting the
>>     same final (computed) height.
>>
>> My conclusions:
>>
>> These three new schemas:
>> 1) are simple in use and in implementation;
>
>   I suppose that would depend on the way the user agent renderer is coded.
>
>> 2) due to their simplicity can be implemented
>>   uniformely in different UA's ;
>
>   Perhaps. Mozilla already implements half of it.
>
>> 3) can effectively eliminate need of tables for
>>   layout purposes in typical cases.
>
>   Why not just use CSS-based table layout? It's not like Microsoft's
> going to support your new CSS properties before it supports CSS 2.1...
>
>   I wouldn't mind seeing seeing a "box-orient" property. The other two
> flow styles are debatable. Hmm...
> 
Received on Thursday, 10 November 2005 08:15:13 GMT

This archive was generated by hypermail 2.2.0+W3C-0.50 : Monday, 27 April 2009 13:54:41 GMT