W3C home > Mailing lists > Public > www-style@w3.org > June 2007

Re: Stylings only possible with Tables

From: Andrew Fedoniouk <news@terrainformatica.com>
Date: Sat, 23 Jun 2007 19:29:25 -0700
Message-ID: <000501c7b607$7bb05b10$3501a8c0@TERRA>
To: "James Elmore" <James.Elmore@cox.net>, <www-style@w3.org>


----- Original Message ----- 
From: "James Elmore" <James.Elmore@cox.net>
To: <www-style@w3.org>
Sent: Saturday, June 23, 2007 5:24 PM
Subject: Re: Stylings only possible with Tables

Would like to remaind again one more approach
for that famous border layout[1]:

Markup:

<body>
  <div id=header />
  <div id=body />
      <div id=leftbar />
      <div id=content />
      <div id=right />
  </div>
  <div id=footer />
</body>

and styling

div#body { flow:horizontal; height:*}
div#body > * { height: * }
div#body > div#content  { width: * }

will give us rendering close to this:
http://www.terrainformatica.com/w3/sidebars.jpg

All blocks inside div#body will be placed horizontally in single row 
(flow:horizontal) and
will have height of content box of div#body (second CSS rule)
div#body will take height left from #header and #footer in the view (first 
rule).
And div#content will take full height of #body and width left from #leftbar 
and #rightbar
(third rule).

Such layout is imposible corrently without tables in standard CSS.
We are using flow CSS attribute[2] and flex length units[3] almost 3 years -
they are recognized as highly useful and yet simple mechanisms.

To test them I recommend to download htmlayout demo browser
http://www.terrainformatica.com/htmlayout/HTMLayoutDemo.zip
and visit folders:
/html_samples/generic
/html_samples/flows

Andrew Fedoniouk.
http://terrainformatica.com


[1] http://java.sun.com/j2se/1.4.2/docs/api/java/awt/BorderLayout.html
[2] http://www.terrainformatica.com/htmlayout/flow.whtm
[3] http://www.terrainformatica.com/htmlayout/fspu.whtm
Received on Sunday, 24 June 2007 02:30:19 GMT

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