by Alexis Deveria

Ready for use: CSS3 Template Layout

Example of template layout system

I’m happy to announce the latest project I’ve been working on:

A jQuery plug-in to provide support for the CSS Template Layout Module. For those of you unfamiliar with this specification, it provides a relatively easy way to make a table-like layout using CSS. Until recently it was known as the “CSS Advanced Layout Module”.

The spec is still a “working draft”, so it can still change significantly. But while that status hasn’t stopped browsers from implementing other CSS3 modules, so far none have tried implementing this one.

Inspired by Eric Meyer‘s Call for a layout system as well as his suggestion that many CSS features can be made to work using JavaScript, I went to work. Why wait for browsers to implement something when we can have JavaScript take care of it today?

The advantages to using this system include:

  • Source independence, so there’s lots of possibilities with the same markup
  • All the benefits of a table-like design without the drawbacks
  • Instant overview of how the basic layout works just by looking at the CSS
  • No need for div-heavy CSS frameworks just to accomplish a simple design
  • Easy rearranging for different media (print, mobile)

The disadvantage to using JS rather than native support means of course that those with JavaScript disabled won’t see the intended layout. However, considering the HTML content can me put in almost any order, there is still a lot of flexibility in how it will appear to non-JS users.

The script has been tested and confirmed to work in the following browsers:

  • Internet Explorer 7+
  • Firefox 2+
  • Opera 9.6+
  • Safari 3.1+
  • Chrome 1+

For download, demos, and usage, see the Project page. Contributions welcome!

Tags: , , , ,

78 Responses to “Ready for use: CSS3 Template Layout”

  1. David Says:

    I love this news !

    Hopefully it’ll push browsers implementers that way.
    Great !

    i suppose it doesn’t (yet) support dynamic template/DOM changes ?

  2. Rob Russell Says:

    Nice work, hopefully it’ll make it easier for people to do layouts they want. One thing I noticed in all the demos tho, none of the slots have rounded corners ;-)

  3. Alexis Deveria Says:

    @David – Thanks! No, I’m afraid no dynamic changes are supported yet. That is something I should look into though, so thanks for the reminder.

    @Rob – Thanks, and true. There shouldn’t be anything stopping one from using them, though. Should work as expected except for perhaps when a slot consists of multiple elements. Each element would have then have rounded corners, rather than the slot as a whole.

  4. Molly E. Holzschlag Says:

    Wow Alexis! I Twittered about this and within a minute it’s been Retweeted ’round the world. To raise awareness and show what can be done, much less what is desperately needed in terms of layout is a great service that you’ve done here. Thank you so much.

  5. Paul Grunt Says:

    Fantastic! I can’t wait to try some things with this. :)

  6. Tjeerd van Sas Says:

    Thanks for creating this! Will definately try it on my experimental website.

  7. Alexis Deveria Says:

    Thanks Molly! Your tweet did what mine could never do. :)

    Also thank you Paul and Tjeerd! To you and anyone else who’s made an experimental design, feel free to share the pages you’ve created or any trouble you’ve ran into.

  8. Matt Powell Says:

    Fantastic work! Just FYI: I was sad when I saw that it seemed to be IE7+ only, but I’ve just tried the example page on IE6 and, with the exception of #3 and #8, they all seem to render pretty much perfectly! I’m definitely going to be playing with this…

  9. Ajaxian » CSS3 Template Layout through jQuery Says:

    [...] full blog entry goes into a bit more [...]

  10. linkfeedr » Blog Archive » CSS3 Template Layout through jQuery - RSS Indexer (beta) Says:

    [...] layout using CSS. Until recently it was known as the “CSS Advanced Layout Module”. His full blog entry goes into a bit more detail.We covered John Resig’s thoughts on the CSS3 Advanced Layout [...]

  11. Ajax Girl » Blog Archive » CSS3 Template Layout through jQuery Says:

    [...] full blog entry goes into a bit more [...]

  12. Neal G Says:

    This is pretty cool! I’ve been waiting a long time to finally tinker with the advanced layout module and now I finally can. I’m a bit hesitant to use this in any production environment, but just the ability to work with and learn the CSS syntax is great!

  13. CSS3 Template Layout through jQuery | Guilda Blog Says:

    [...] full blog entry goes into a bit more [...]

  14. CSS3 Template Layout through jQuery Says:

    [...] full blog entry goes into a bit more [...]

  15. Luciano Says:

    I use a JavaScript based layout on my website since november 2007: http://www.cromoteca.com/en/blog/tablebasedlayoutswithsemantichtml

  16. Alexis Deveria Says:

    @Neal G – Glad you like it! That’s exactly what I wrote it for, have fun experimenting!

    @Luciano – Nice! However, your scripts appears to generate actual table elements. The problem with that is that many screen readers read from the JS-generated HTML rather than the source HTML, so you’ll still have the accessibility issues that come with using tables for layout.

  17. SitePoint Podcast #14: The Cyberdyne Bill Says:

    [...] Ready for use: CSS3 Template Layout (Fyrdility) [...]

  18. Conrad Says:

    Thanks- this is pretty much all I’ll be using in my websites for the near future.

  19. Chris Says:

    One way to ensure the layout degrades gracefully is add an #id or .class to the body, then remove it with js. Then just add specific styling for when js is disabled, eg:


    body#nojs #primary { width: 550px; float: left; }
    body#nojs #secondary { width: 200px; float: right; }

    Etc.. :)

  20. 網站製作學習誌 » [Web] 連結分享 Says:

    [...] CSS3 Template Layout [...]

  21. Technology Info » Links for 2009-04-30 [del.icio.us] Says:

    [...] Ready for use: CSS3 Template Layout | Fyrdility [...]

  22. furiousBlog - in my diatribe » Blog Archive » FML Says:

    [...] jQuery plug-in for use with the CSS Template Layout Module [...]

  23. Luciano Says:

    @Alexis: Wow! I didn’t know that, thanks for letting me know.

  24. Thiago Cavalcanti Says:

    Interesting. Now all I’ve to do is make sure everybody has js working…

    Jokes aside, this should really come in handy when it’s actually implemented by the browser makers, since available solutions for no scripting users( like the one proposed by Chris) imply a lot of duplicate work which kind of defeats the purpose of all this. Whew!

  25. Alenônimo Says:


  26. Neal G Says:

    Alexis, how do I give a :slot() or a child such as #content padding while keeping the background-color. I’ve tried putting padding on #content and #container::slot(c) but neither give me the desired result.

    #container {
    “hhh” / 100px
    “fff” / 100px
    200px 600px 200px
    margin: auto;
    width: 1000px;

    #header { position: h; }
    #content { position: c; }
    #subnav { position: s; }
    #nav { position: n; }
    #aside { position: a; }
    #footer { position: f; }

    #container::slot(h) { background: #eee; }
    #container::slot(n) { background: #ddd; }
    #container::slot(s) { background: #ccc; }
    #container::slot(c) { background: #bbb; }
    #container::slot(a) { background: #aaa; }
    #container::slot(f) { background: #999; }

  27. Alexis Deveria Says:

    @Neal – Good point, thanks for reporting that. I believe it’s an issue that’s been fixed in V1.1.1. Here’s your example code with the latest version of the script, which seems to be working.

  28. Neal G Says:

    Thanks Alexis! Much better! I was starting to re-write my article’s code and was getting stuck on that.

  29. 墨尔本 Says:

    Doing website is like making software nowadays. Nice article to read.

  30. CSS3 Template Layout through jQuery « Internet Turnkey Websites Says:

    [...] full blog entry goes into a bit more [...]

  31. Sammy Sumer Says:

    Dear Alex Deveria,

    I just want to say thank you. Thank you so much for your wonderful contribution to the web community.

    I was aware of “Advanced Layout module” for about 2 years and always dreamed of laying out sites with this module. I knew It was just a dream and it is years away, however with your wonderful javascript plugin I can build websites that are much more accessible than tables.

    All the best and keep the good work
    Sammy Sumer

  32. rascunho » Blog Archive » links for 2009-05-13 Says:

    [...] Ready for use: CSS3 Template Layout | Fyrdility A jQuery plug-in to provide support for the CSS Template Layout Module. (tags: a.deveria.com 2009 mes4 dia13 layout jQuery javascript emulator CSS *****) [...]

  33. David Says:

    Hi Alexis,

    do you think you can add adapt the script so that it will be compatible with browsers supporting the spec natively ?
    i mean detect if the UA already do the layout as expected, and then stop the script.
    i know you like challenges ;-)

    well maybe it’s way too early to bother with such a problem, since there is no native implementation yet. but i think it’s something that you will have to do, sooner or later.


  34. Alexis Deveria Says:

    @Sammy – Thanks! Glad to be of help.

    @David – Actually, it already does. :) I’m not 100% sure it works of course, but there’s a “hasNativeSupport” function that creates an element with a display value of ‘ “@” ‘. If that value is returned when checking the value of its display property afterwards, it is assumed that the functionality is supported and the script will stop running.

  35. David Says:

    I wasn’t aware of that. Excellent !!!
    You’re definitely the best.

  36. Buguletzu Says:

    Next stop: make all css selectors work in all browsers. (css3, css2, css1) :)

  37. Buguletzu Says:

    Scratch selectors, make-it all work. :)

  38. Buguletzu Says:

    Or everything that it is do-able, at least.

  39. Alexis Deveria Says:


    Actually, it seems that there already is a the full selector support script: http://andykent.bingodisk.com/bingo/public/jss/

    As for “everything else”…I’m sure it’s just a matter of time before we see more CSS3 support scripts cropping up.

  40. Colorrage Blog » Blog Archive » Try out the CSS 3 Template Layout module Says:

    [...] If you want to get a taste of using the CSS 3 Template Layout module, Alex Deveria has written a jQuery plugin which implements the syntax. [...]

  41. artur Says:

    Oi Alexis,

    why using $.setTemplateLayout(“JQtp.css”) works well in all browsers and
    using $.setTemplateLayout(“../../JQtp.css”) don’t works only on firefox?

    How do I fix it?

  42. Alexis Deveria Says:

    Hm, I guess that’s something I need to fix for the next version. For now, try using the absolute path, i.e. http://example.com/css/JQtp.css

  43. Rusco Says:

    Hi Alexis,
    your great plugin solved my layout troubles, thanks a lot !

    Well, almost. Now I tested my site with various screen resolutions and found out that specifying an initial height for the header hides my footer if the screen resolution is low (ex. 1024*768), but pulls my screen content up if the resolution is high (ex. 1280*1024).

    So what could help me is a percentage rather a fixed height. But I don’t know whether this is foreseen by the css3 spec. Have you any ideas/proposals ?

    Good old tables could handle that !

  44. c10 Says:


    This is great new stuf!! Thanx! I build one testpage and the one thing I really hoped for was the border left and right to work the same as the background color (till the bottom of the longest collumn

    body::slot(a) { border: 1px solid; } this is not possible yet I believe?!

    or….. is there maybe a way to get that done?

  45. c10 Says:

    If I use this in my header:


    do I also need to download the latest version of Jquery?

  46. C10 Says:


    Sorry I am messing up your comments. This time without the script tags

  47. Mitch Says:

    I took a look — great work, very commendable to put something like this out.

    Suppose that we define a template:
    “aabr” /65px
    * * * 5px
    where some div is assigned to each position except for “f” . Then jquery.tpl_layout1.1.4.js does not format the CSS3. I’ve tried two other examples that suggest that whenever an “unused” letter is placed into a display string, the emulation fails entirely.
    Is it an error in CSS3 to define a slot but not put something into it, or is this a bug?

  48. Alexis Deveria Says:

    Quick note: I’ve been a bit busy lately, but do I eventually intend to fully address the issues that have raised here recently.

    Thanks for the feedback, keep it coming!

  49. Liviu Anghelina Says:

    Wow! Can’t wait to try it out
    That are great news, can’t wait to try it out, many thanx man!!! Your awesome!!!
    Respect, Liviu

  50. Rusco Says:

    Just to let you know, this might be a way to avoid the additional stylesheet call in the $.setTemplateLayout(…); function:
    its the cssugar project, which wraps all css statements in a json format.

  51. Michael Strong Says:

    Hi Alexis

    Wonderful work mate and exactly what I was looking for in a templating application. Thanks very much!

    I have a code change suggestion to make and would appreciate your comments. When loading the CSS from a style tag you use:

    css_data = st_el.text();

    which doesn’t work in IE. Instead for IE you use a “get” of the whole page which in some cases doesn’t work (e.g. when embedding IE). I switched this code to use

    css_data = st_el.html();

    and it all seems to work fine, but I have only tested under IE. I’m a complete newbie to jquery so I’m wondering if there is some reason why text() is used instead of html()?


  52. Alexis Deveria Says:

    @Mike – While html() indeed appears to work in IE it actually returns a parsed version of the text, removing some of the unknown rules/values. So detecting a text() failure and using an alternate solution works better. Actually I’d recommend Just using a linked stylesheet.

  53. Links for 2009-04-30 [del.icio.us] « Toko Komputer Online Purwokerto Says:

    [...] Ready for use: CSS3 Template Layout | Fyrdility [...]

  54. Michael Strong Says:

    Thanks for your reply Alexis. You recommend using a linked stylesheet which is fine when linking to an external server. However, in some cases this code will need to access a local stylesheet which of course can’t be directly retrieved via JS.

    In the case where local access is required I can load the stylesheet into a style tag or I could load it into a variable and pass it in via the options object. Unfortunately when I tried this last method I wasn’t able to get it to work at all, probably because I have the syntax wrong.

    Would you be able to give me a detailed example of calling in a stylesheet via the text option? Alternatively, could you explain in more detail the possible dangers of leaving the code as is with a call to html() instead of text().

    Thanks very much for your help,
    Michael :)

  55. Alexis Deveria Says:

    @Rusco – I’m afraid I’m not sure how to recreate the problem you refer to in regards to the effects of changes in resolution. While I think I know what you mean, I don’t see how it could be done using tables either. So, if you could provide me with a demo where it is done using tables, I’ll be happy to look into it (and I suspect it should be possible in that case)

    Also, thanks for the CSSugar suggestion. Looks good, but the problem is that there’d be no styles applied for users without JavaScript. And while indeed the CSSTL rules could theoretically be defined outside of the stylesheet, I really wanted people to be able to use the rules as if they were implemented by the browser today.

  56. Alexis Deveria Says:

    @c10 – The current version of the draft mentions that only the following styles can be applied to slots:

    • All background-* properties (including the ‘background’ shorthand).
    • ‘vertical-align’
    • The ‘overflow’ property.

    So borders can not be speficied. However, support for borders has been requested so it may be possible in future versions of the spec.

    If you provide me with a demo page of what you’re trying to do, perhaps I can help find a solution?

    Also, while I think it should work in jQuery 1.2.*, it was tested in 1.3, so that’s the version I would recommend you use.

  57. Alexis Deveria Says:

    @Mitch – That is a good question. I don’t see where the spec addresses this, though I’m pretty sure it should just leave the slot empty. I’ll make the appropriate change in my next update. Thanks!

  58. Rusco Says:

    Hi Alexis,
    I put an example here: http://pastebin.com/d5fdc59eb

    Have a look at the css where I wrote:
    position: absolute; top: 50%; margin-top: -170px;

    If you enlarge/reduce the screensize, the relationship of the header/body/footer somehow follows, you have a “centering” effect.
    In your plugin, if I assign a fixed “hhh” /200px in the header, I will always stick to the 200px.

    How would I translate my pastebin into css3 layout ? Is there an equivalent ? If I am not wrong your samples do not cover that.

    Another issue I have with this sample is that with a very narrow screen the blue background does not cover all the text, but this is another story.

  59. Alexis Deveria Says:

    @Rusco – I do believe it should theoretically be possible to accomplish that using CSSTL, but unfortunately not currently with the script. This is because you’d need the template element to be positioned absolutely, which doesn’t work as expected using the script. Hopefully I’ll get around to adding support for that in the future.

    For now, take a look at this demo. It uses some CSS hacks for IE and an extra DIV, but aside from that I believe it accomplishes what you want (without that text overflow issue).

  60. ata Says:


  61. wie bali Says:

    That are great news, can’t wait to try it out, many thanx !

  62. Stefan Says:

    Wow, this got me really excited again about css!

    Just a remark: if I use this:
    display: “.hh.” /100px
    “.ff.” /200px
    5% 200px * 5%;
    Then the layout doesn’t work, it’s not centered anymore.
    If I remove the last height declaration “/200px” it works again (the first /100px works correctly).

    This in pursuit of my personal “holy grail”: a layout without tables, where my footer is on the bottom of the page, even if the 2nd row (“.nc.”) has not enough content.
    Do you have any idea how to accomplish this, with CSS Layout?

  63. Wayne State Web Communications Blog » Blog Archive » [Friday Links] The eduWeb Edition Says:

    [...] Ready for use: CSS3 Template Layout | Fyrdility [...]

  64. Project Management Templates Says:

    I’d assume that it works similarly to tables, but layouts aren’t hindered by strange rendering of floats and borders and whatever.

  65. vvc Says:

    Is it possible to stich my footer to browser’s window bottom?

  66. write my essay Says:

    Really useful information! You did good job

  67. Jonni Says:

    Anatolia Vasermanu would have loved your post!

  68. logo designs Says:

    you did a greaat job, Useful article for me :)

  69. weeds season 4 Says:

    Great write up, I liked the project page as well! Keep up the hard work!

  70. linuxchiq Says:

    Thanks so much for doing this! I am excited about using the new css3 features. ^_^

    I did encounter an issue in IE (7 & 8) when using the latest jQuery (1.4.2), where the page would not display (worked perfectly in firefox). By downgrading to jQuery1.3.1 the page displays more or less correctly, though I still get an “error on page”. Just thought you’d want to know.

  71. Philip Says:

    Hello Alex
    Adding “height:100%” to the CSS of the slot-containing element completely destroys the whole layout. Is this expected behavior or is this a bug in your great script?

  72. Büyü Says:

    Adding “height:100%” to the CSS of the slot-containing element completely destroys the whole layout. Is this expected behavior or is this a bug in your great script?

  73. Ayew Says:

    Really helpful article…

  74. Henry Says:

    I agree with linuxchiq, the script doesn’t work on IE 8 if using jQuery 1.4.2. If I use jQuery 1.3, it works well.

  75. Alexis Deveria Says:

    @linuxchiq, Henry

    After an inexcusable delay, I’m happy to say this has been fixed in version 1.1.6. Update available on the project page. Thanks for letting me know!

  76. Louis Says:

    Thanks so much for doing this! I am excited about using the new css3 features. ^_^

  77. windows 7 touch screen Says:

    windows 7 touch screen…

    Fyrdility » Blog Archive » Ready for use: CSS3 Template Layout…

  78. online kolikkopelit Says:

    online kolikkopelit…

    Fyrdility » Blog Archive » Ready for use: CSS3 Template Layout…

Powered by Coffee, Marmite, jQuery and WordPress