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

Java style layout managers for CSS

From: Andrew Fedoniouk <news@terrainformatica.com>
Date: Wed, 9 Nov 2005 20:25:21 -0800
Message-ID: <006601c5e5ae$c3ffab30$3201a8c0@Terra>
To: <www-style@w3.org>

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; 

flow:h-flow 
   - this is close to Java's FlowLayout [1],
     blocks layouted horizontally until space 
     allows consequently forming rows;

flow:v-flow 
   - this is close to column layout, 
     blocks layouted from top to bottom.
     On vertical overflow they are wrapped into new column;

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;
2) due to their simplicity can be implemented 
  uniformely in different UA's ;
3) can effectively eliminate need of tables for
  layout purposes in typical cases.

Just for your information.

(Live demo will be available tomorrow)

Andrew Fedoniouk.
http://terrainformatica.com


[1] http://java.sun.com/docs/books/tutorial/uiswing/layout/visual.html#flow
Received on Thursday, 10 November 2005 04:25:33 GMT

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