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

Re: CSS3 and better support for table free designs

From: Andrew Fedoniouk <news@terrainformatica.com>
Date: Sat, 26 Jun 2004 16:35:50 -0700
Message-ID: <000401c45bd6$50de4750$0201a8c0@ATHLON>
To: <www-style@w3.org>, Christoph Päper <christoph.paeper@tu-clausthal.de>

> ... Andrew keeps pushing this proposal of his again and again and again
...

:) 'cause it is simple and natural.

Current state of CSS is the "Procrustean bed" for modern online
applications:
it perfectly suits paradigm "html-as-an-endless-tape" - static texts,
documentation, etc - one dimension layout pretty well.
But it has merely nothing for support two dimensional flexible layouts - the
must for online applications having forms, interactive components and other
stuff bound with viewport rectangle.
"Positioning" of different kinds is an attempt to provide a "solution" for
such layouts, IMO, failed as it (positioning) practically cannot be used
without scripting (that is another song).

%% units or XUL's "flex"es can help a lot to handle such layouts.
I like %% length units more (objectively) as they allow make flexible not
only width/height (as it is in XUL now) but also  other dimensional
attributes. E.g. in one of my examples I am using:

<div style="width:XXpx; height:YYpx">
  <div>Text at top of a container</div>
  <div style="margin-top:100%%" >Text at bottom of a container</div>
</div>
to place two lines at top and bottom of a container.

Easy and natural (from human and CSS point of view), isn't it?
Just try to make something like this in current CSS. No way.

Other great benefit from %% units - they will finally remove misuse of
text-align and vertical-align.

See, for table-cell, vertical-align means *alignment of container content*
and for IMG vertical-align means exactly
opposite - *alignment of the particular element in its container*. Not bad,
huh?

See:
<div style="padding-top:100%%">...</div> - content of the div will be bottom
aligned
<div style="padding-bottom:100%%">...</div> - content of the div will be top
aligned
<div style="padding:50%% xx">...</div> - content of the div will be in its
middle.

Sorry guys, I don't really want to agitate your more....
For me benefits are clear, mechanisms are proven to work, example was
published - anyone can try by himeself.
Yes, my English is not so strong to write a formal explanation. It would be
just great if somebody has spare time and can help me to do this. I'll
appreciate a lot.

Andrew Fedoniouk.
http://terrainformatica.com


----- Original Message -----
From: "Christoph Päper" <christoph.paeper@tu-clausthal.de>
To: <www-style@w3.org>
Sent: Saturday, June 26, 2004 12:57 PM
Subject: Re: CSS3 and better support for table free designs


>
> <ooar123@ntlworld.com>:
> > On Fri, 25 Jun 2004 21:47:35 -0700, "Andrew Fedoniouk"
> >
> >> body { flow: horizontal; height:100%; margin:0 }
> >> #left { width: 100px; }
> >> #middle { width: 100%% } - will take rest left from #left and #right
> >> #right  { width: 200px }
> >
> > I tested the above exactly and it didn't work-
>
> Of course not, because ...
>
> >> 'flow' and  %% units are my personal invention - they are non standard.
>
> ... Andrew keeps pushing this proposal of his again and again and again
...
>
> The CSS2 solution is:
>
>    html     {height: 100%; display: table;}
>    body                   {display: table-row;)
>    #left, #middle, #right {display: table-cell;}
>    #left    {width: 100px;}
>    #right   {width: 200px;}
>
> This fulfills all your requirements except:
>
> | serve the columns in what ever order I wish.
>
Received on Saturday, 26 June 2004 19:36:15 GMT

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