Java style layout managers for CSS

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 UTC