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

So far 'flow' gets following values:

   - standard layout of <div> element.

   - same as above but child blocks layouted
     in horizontal direction forming single row; 

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

   - 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:

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>

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.


Received on Thursday, 10 November 2005 04:25:33 UTC