
CSS3 Template Layout - qhoxie
http://ejohn.org/blog/css3-template-layout/
======
iamdave
I'm sure it'll change if I actually use it, but for now, this type of syntax
seems to be pointlessly obfuscating what's otherwise a simple markup scheme
for creating layouts.

~~~
scott_s
The author claims what he presented would be difficult with current CCS. Do
you disagree? Is there a clearer way to define the layout?

This technique seems similar in spirit to how Latex defines tabular
environments:
[http://www-h.eng.cam.ac.uk/help/tpl/textprocessing/teTeX/lat...](http://www-h.eng.cam.ac.uk/help/tpl/textprocessing/teTeX/latex/latex2e-html/ltx-68.html)

Disclosure: I'm not a web developer and have only done simple layouts with
CSS.

------
geuis
I'm obviously missing something, but from studying the ascii diagram I don't
see what the problem is? 3 columns with defined heights, widths, and margins.
What's the thing I'm missing?

~~~
ii
It's not a "ascii diagram", it's a new syntax for CC3 display property.

Complete example:

    
    
      <style type="text/css">
        body {
          height: 100%;
          display: "a   .   b   .   c"  /2em
                   ".   .   .   .   ."  /1em
                   "d   .   e   .   f"
                   ".   .   .   .   ."  /1em
                   "g   .   h   .   i"  /2em
                   5em 1em  *  1em 10em}
        #logo {position: a}
        #motto {position: b}
        #date {position: c}
        #main {position: e}
        #adv {position: f}
        #copy {position: g}
        #about {position: h}
      </style>

~~~
JoelSutherland
So the position attribute is being used for this?

What if I wanted to associate #logo with 'a' but wanted to offset it some.
Logically I would want to do something like:

#logo { location: a; position: relative; top: 5px; }

What would the proposed way of accomplishing this be?

~~~
ii
I guess #logo {position: a; margin-top: 5px}

It's only a draft. Everything may change.

Read <http://www.w3.org/TR/css3-layout/>

------
trickjarrett
I am not a fan.

~~~
bprater
I don't believe in monkeys? At least take the time to elaborate. That's a
reddit response, not a y!hacker one.

~~~
trickjarrett
CSS2 has it's share of problems, but is the problem in the language or in the
numerous interpreters / browsers out there?

What is the purpose of this change?

Cross browser Cooperation in layout: This solution is meant to make it more
standard across browsers, but it's a complete reworking of the system and it
still won't guarantee cross browser functionality.

For the developer/designer: Really? I think the designers already have a
pretty clear idea of how to develop with CSS. Look at the various CSS
frameworks out there for column based design, that's what I think it should be
based off of.

I'm not a fan.

