Advanced CSS Layouts

28 thoughts on “Advanced CSS Layouts”

1. I disagree that we need the “advanced” features in the pipeline of CSS. Consistent implementation of what’s already in CSS2.1 would be more than enough. There’s already enough common ground for float to be used in quite powerful ways, such as with negative margin values.

   IE’s blossoming support for the table values of CSS2.1 display property, as mentioned in the video, is likely to help with equal-height columns and “sticky” footers. But float isn’t too bad once you understand the basics and in some ways offers more flexibility than tabular layouts. Such as with horizontal menu bars which wrap to a new line if there isn’t enough space, or image galleries where grid-with-wrapping layout behaviour works great for most cases. Especially so flexible layouts.

   The entrenched users of IE6 remaining more or less the same after IE8 is a good point. I guess they won’t upgrade IE until they get a new PC and install all the updates.

   Imaginative use of the features we already have is how CSS took off (Taming Lists, for example). That’s what I think will keep it useful and realistic for widespread use, especially with the implementations getting closer and closer.

2. I’m afraid I cannot agree, Ben. For all the superb versatility of existing CSS layout techniques (floats, negative margins, absolute and relative positioning etc.) and the ingenuity with which they are exploited, it is much easier to write—and understand—a layout which employs CSS tables. For example, the “holy grail” is trivial:

   
   body {
     display: "hhh"
              "ncs"
              "fff"
   }
   
   #header {
     position: "h"
   }
   
   #content {
     position: "c"
   }
   
   #nav {
     position: "n"
   }
   
   #sidebar {
     position: "s"
   }
   
   #footer {
     position: "f"
   }

   After refreshing my memory of the specification, I wrote that CSS in about a minute, and tested it using almcss. I have never tried to use the advanced layout module before, but it worked first time.

   Of course, I could probably write a three-column layout using floats pretty swiftly; however, floats are notoriously brittle (I shed many tears over this when I was less experienced), so many designers prefer the precision of absolute positioning. Of course, this has nasty implications for footers which must be remedied; perhaps we now resort to negative margins, or combination techniques.

   My point is not that complex layouts are intractable; you are correct that an experienced designer can achieve a lot with what we already have. My point is that they are certainly more complex, and that I have yet to see a general-purpose layout solution nearly so robust, simple and readable as that offered by the advanced layout module. CSS 2.1 is great, but it often results in uncommonly complex solutions to common and easily-specified design objectives.

   PS: Great video! May I make a non-content related suggestion, though? It might just be me, but there was something a little awkward about having the hosts stand side-by-side. Perhaps if they were sat down a little farther from the camera and at an angle from each other (as is often the case on talk-shows), it would have seemed more natural.

3. CSS layouts are the biggest problem. But can we wait IE8 or CSS 3? I had similar problems with CSS layouts and I decided to build CSS Grid Framework who can work like table.
   P.S And is working well on IE 5.5 and every other modern browser 🙂 Who can wait 5 years everyone to migrate to IE8!?

4. Hi Jordan,
   Thanks for the interviewing tips. We are saving our pennies to buy a proper video camera. Most of the time we are using the web cams built into our computers to shoot the vids. This effectively means that interviews usually need to be conducted in this front on manner 🙁 However, we will do our best to make them a bit more natural in the future.

5. Don’t worry too much, Marcos; as the mantra goes, content is king, not presentation. I enjoyed the video, so getting a better resolution camera (I guessed that it was so close to the hosts) should be considered progressive enhancement and no more.

6. * “I guessed that was why it was so close…”

7. Thanks for the commiseration. I am a hack designer but run my own design company. I have heard the moans and groans of my designers, who I have made transition to CSS. But I hate to do anything to support IE8. IE is a real sore stop among my team. We call it our uncles browser.

8. I have mixed feelings regarding the complexity of the current CSS best-practices for table-less designs. I am a designer and coder and so far have been able to build any design that came my way using the current CSS2.1. Im not talking about crappy looking designs either.

   So on one hand to say it’s too hard to learn so it should be made simpler seems a slap in the face for the people who worked on getting CSS to be a prominent tool in the developers toolbox. If CSS can be made more simple then it should, but only for the sake of making the code’s semantics more closely related to the syntax.

   I teach CSS and HTML to beginners, so trust me, I know the difficulties beginners face with making tableless designs. However the power of what advance CSS can do is also exciting to them and worth the added learning effort.

   To me the browser differences are what make CSS a mess, not CSS itself. We see the trend to support CSS more accurately and speed up use of javascript etc… so I don’t think browser support should be a reason to change CSS either. When I code CSS to style my HTML the styling makes sense, as does the intuitive way in which it seems the styles SHOULD be applied. But then you do a cross-browser check and all that gets flushed. BUT… i spend the added time and can usually make any thing look right with minimal hacks and js.

   So in closing… make CSS easier to code and learn, but do it for the right reasons. When CSS is easier to learn and use we will all get more competition from newbies! 🙂

9. This is very silly. 1) Using CSS tables to position content is still abusing tables. 2) In the time it would take to learn to apply styles to CSS tables you could just learn CSS instead. CSS positioning is actually fairly straightforward.

   Want to make life easier for developers? Get rid of Internet Explorer.

10. I don’t agree with Kevin. I think good web designers worth their salt in today’s internet, have already tackled the CSS positioning learning curve and don’t need to revisit the whole issue of positioning. For newer designers, it’s a badge of honor to be earned…learn positioning and understand the power.

    Tables should be reserved for tabular data like they were meant in the beginning.

    And any progress in the IE area to move toward conforming is welcome. Blame your headaches on IE where it belongs and not CSS positioning.

11. I agree with both Ben and Jordan on separate points of view. The main problem I see with standards, W3C and with designers that find CSS to hard is the browser implementation and rogue views. If all browsers used the same rendering engine or interpreted what “standards” we have at the moment and cleaned up their implementation, people that find css “to hard” could find it simpler.

    We should concentrate on fixing the way we work at the moment rather then start looking at new layout techniques and spec versions that wont be adopted by browser vendors in their entirety anyway. If they do we wouldn’t be able to use the principles for at least another 5yrs anyway because of the tiny percentage of users with a browser capable of yet another layout method will mean that we can’t adopt the method for real clients.

    Also why have a governing body like the W3C keep writing specs when the main stake holders all have different prerogatives and bias on what they will or wont use. Having main players on the board and and meeting is all fine and dandy but nothing seems to happen or change for the real world designer/developer appart from Microsoft, Mozzilla, Opera get some good PR because they are “helping evolve the web”.

12. Anyone who has to write separate stylesheets for each browser, fails at a web designer/developer.

13. This is all great and I hope hardcore CSS fans use CSS tables on their web sites as soon as possible.

    However, no matter show far superior this technique will be, I’ll be sticking with the complex and painful layout techniques of old until browser support becomes sufficient enough for this to be considered “practical”.

    In the meantime, I’m going to focus on much more important issues related to web development and more importantly, vital factors that increase a websites ability to perform.

14. As long as we have the browser wars we will continue to have debates like this. However, I do think tables in the old days were a creative revolution so I’m glad to see them back in a semantic context, although I don’t think the hacks will go away.

15. I am sorry but I can not really agree. I would not say it is that much a problem using CSS for layouts in all current modern browsers. The only browser which needs some extra work is IE6 and hopefully that one is not going to be with us for a very long time. I don’t really see point using css tables when simple css can be used and we all know tables have been created for different reasons.

16. As a HTML turned strict CSS designer, I would rather prefer browsers to auto update themselves to the newest version. Either the host companies such as MS for IE6 should just get it over with and kill IE6 and move their users to IE7 or IE8 for that matter. Firefox does auto updating. Which is quite pleasant since I may be too busy, or put it off. It is automatically taken care of for me. Then I can see all my fav sites correctly in the most standards compliant browsers.
    I think that some standards may suck but I think standards on browsers to support the most currently program languages or at least CSS would be a great start. I hated tables for the simple fact that there were so many limitations of cells. At least in CSS are ways to position items so you can become a bit more creative.
    I know that content is key, BUT, with out a good design now-a-days, your reputation as a trustworthy website depends on a good design and great layout. Layouts are getting more creative and very graphical. The next generation of users are getting used to these very graphical designs. MySpace Layouts for one. I know we all have qualms with the MySpace but 3/4 of the custom layouts people use are heavy on graphics. It is just the way not only the web is going towards, but the way TV advertising, print, among others.
    With all these other medias heavy in graphics, the website has to support these other medias so branding can be consisitent. CSS has the power to cater to the more graphical sites.
    So with standards in place and cross browser capabilities in place, CSS it the tool to use in front end web site development.

17. One thing I haven’t heard mentioned in this discussion is the client.
    They’re ultimately the ones who foot the bill for incompatibility between browsers, and for design solutions that are brittle and absurdly labyrinthine. No client knows, or should need to know, what a mess of hacks and work-arounds it takes just to get a three-column layout to line up to the same height at the bottom. However, given that, in the era of html tables, such a layout took all of thirty seconds to implement, a client will wonder why such a patently simple thing is costing so much time and money, and why it still seems so fragile.
    Low income and not-for-profit clients may not be able to afford robust solutions, and this is regrettable for everyone.
    Being a good designer is not a measure of how much code you carry in your head. It’s not about having payed your dues in a fractious system. It’s about solving the problem presented to you by your client in an efficient and elegant way. That browsers are incompatible, and that accessibility is so difficult to achieve, makes efficiency and elegance exceedingly difficult hence, costly.
    Simplicity and ease of use is generally a very good measure of quality. With that in mind, CSS, while having great benefits, is, to this point, fairly poor quality.

18. A philosophical point. People use browsers to view information. Presentation is important, but to date, there has been little more than a slightly dynamic way of producing a page layout, such as one might find in a magazine, for example, with the possible exception of Flash, which is, or can be more interactive.
    I’d guess it will take something radically different to get us, as a race, out of this “let’s re-create pages on a PC screen” mentality. Until that happens, and until the search engines treat everything based on the same merits that we use to evaluate what we find, there won’t be a successful standard that browser makers can all adopt (though I suppose they never will agree anyway).

19. I agree with Nick. The paying customer and end user of a website should not be concerned with how it was designed or coded. I only think about how a magazine or newspaper is designed or printed when there is a printing error. I care about the content that I’m reading.
    I agree that we should continue to develop new and better ways of creating layout vs. content but I tend not to work at the cutting edge.
    This is because a) time taken to upskill, b) time lag for cross browser support.
    Does stradling the cutting edge allow me to do anything new that cannot be achieved otherwise? No.
    Will my customers care that I use older technology. No [so long as the website works].

    I definitely think that css tables are a better solution to design layout, and I will definitely be using them. But I will only implement them when there is enough browser support.
    Until then, it’s floats and position for me…

20. I think the entire problem is the English language itself. It’s lack of clearly understandable sentences, use German or Hungarian instead. When I’ve read the standards I could imagine at least 3 or 4 different implementations for a browser, and I don’t wonder why all the different browsers behave so differently implementing the “standards”.

    That’s my opinion: English is a bad language to lay down any standards and definitions, it’s not exact enough

21. Bolla, certainly true. Unfortunately, formal languages like Z (a supposedly unambiguous langauge to write specs in computer science) are too hard for implementers to work with. We, who write standards, depend on implementers to tell us any parts of the spec that are ambiguous. If something is ambiguous then yes, we have a problem and the spec should be changed to make things more clear. However, it’s really really hard to get people to review specs properly. Also, spec writers are usually not computer scientists. For example, I come from a multimedia design background.

22. Tables are for tabular data. CSS is for separating content from presentation. CSS is not “too hard” if you take the time.

23. @marcosc

    I know well that not everybody can be a computer scientists and myself aren’t one of them. I’ve learned using CSS and other standard through tutorials because I feel myself more confident in programming languages than web standards. It was quiet difficult to understand the CSS standard itself as english is not my native. I think there is lack of good examples how to use the standards exactly. I could imagine good looking 3D movies explaining positioning and examples that points out the changes between the different attribute values. This is a kind of multimedia stuff :-). Even for developers of browers would be this a good reference. They can ask things like “Does the page appearing in my browser as in the movie?”. I’m quiet sure you finished discussing about similar things already.

    best regards

24. Correct me if I’m wrong but, most of the reason we (as CSS developers) have had to employ an unholy mix of hacks an voodoo to make standards work cross-browser comes down to just one thing: Microsoft’s incredibly lame lack of support for said standards. There is nothing inherently wrong with, or all that difficult to accomplish with, the current set of CSS specs. In fact, I’d guess implementing an equal-length-column specification for CSS 3 would take far less time and effort than having every browser manufacturer agree on how “CSS table layout” should be interpreted.

    Why in the world would we ever dream of going back to that old-school nonsense? Furthermore, someone made an excellent point earlier – if MS wants to be taken seriously they should simply publish a patch that removes IE6 permanently, since it’s the root cause of this compatibility headache. Even this close to a gold release for IE8 I still find myself occasionally having to use conditional comments targeted at IE6, and CSS tables is not going to change any of that – it’s not a magic fix.

    Lastly, why should those of us who embraced CSS 2.0 and standards want to re-learn a completely new layout standard when all it does it replicate something we’ve already discarded? To me the whole idea of CSS Tables is a non-issue; the only argument I’ve ever heard worth mentioning is that it’s tough to get matching columns with pure CSS. Shouldn’t we just fix this once in a new CSS spec and be done with it, instead of rethinking the whole layout structure to go back to a table environment? The whole approach just doesn’t make sense, I think it’s nuts.

25. I think that a couple of people (particularly Damon and Connie) misunderstand what “CSS tables” is referring to. It is not some unholy love-child of actual table mark-up and CSS, but rather a proposed extension to CSS which will vastly simplify the production (and learning-curve) of complex grid layouts. No tables in your HTML; in fact, you can actually write leaner HTML!

    Also, while I acknowledge the satisfaction that achieving a high level of proficiency in CSS confers, the fact that it requires such effort—to the extent that to my knowledge, there are no visual editors which can produce CSS layouts from scratch with the same robustness and flexibility as existed for old-school table markup—rather highlights its limitations.

    If I may propose something rather radical: after several years of considering this matter, I actually think that CSS is quite far from being an ideal method of presenting a semantic HTML document. I have three reasons for this belief:

    1. CSS, at its most fundamental level, does not actually separate content from presentation. Any presentational effect in CSS is basically done by somehow “hooking” some combination of styles and positioning onto an element of content—effectively, the structure and number of elements in your markup limits what you can do with CSS , which is the biggest reason that so many websites are replete with non-semantic “wrapper” or “container” elements.

    2. In order to achieve the above, CSS must first select the correct elements to style, in which respect it is also far from ideal—as anyone who has ever hoped for a parent or next-sibling selector will know.

    3. Finally, as I hope any graphical designer will appreciate, CSS in and of itself is a far cry from being a good way to specify visual elements and how they relate to each other.

    I am loathe to make criticisms without also offering suggestions, so here goes. My own preference would be to use a client-side XSLT transform with an XHTML document to combine it with an SVG document containing appropriate placeholders, and thus render a compound SVG+XHTML document. All three of the above problems are eliminated in one fell swoop:

    1. Because the presentation is completely specified in an independent XML format, one need no longer pollute one’s content markup with needless presentational elements.

    2. XSLT is an extremely powerful selector language, providing possibilities which CSS cannot even dream of. (This also reduces the amount of presentational markup: you can easily specify, say, that the first ordered list of links encountered in a document is for navigation, without any recourse to IDs, classes or containers.)

    3. SVG is swiftly becoming a well-respected graphics format in its own right. You want a drop-shadow for an irregular shape, or apply a transform matrix? SVG filters are more than up to the task.

    Imagine the process. You start out with a nice, clean page of markup—no containers! Next, you open a graphics package and design your page layout, specifying which areas you want to stretch or scale and how, specifying a few placeholders where you want your content to go. Finally, with some help from clever software, you decide what rules should be used to decide which placeholder the content in your XHTML document should go into.

    The technology already exists to do all this. XHTML, XSLT and SVG are fairly mature, well-defined standards, and implementation in non-IE browsers is pretty good. With a concerted effort, something like this could really work. One major concern is accessibility; for example, I’m not sure how a screenreader would cope with the compound rendering. Perhaps such software could be provided with the XHTML document itself (which, after all, is sent to the client side for transformation)? I just want to throw this out there and see what people think.

26. (Note: I would have formatted the above as actual lists for better readability, but without a preview function I don’t fully trust them to come out as intended! ;))

27. the above suggestion is to use XSLT is a bit of a joke, the limitations of which are already well known, that aside, to bark on about the current “headache” of CSS layouts and in the same breath propose something 10x more complex to the average noob is, well, silly.

    display:table will never be a realistic option, content source ordering is impossible, and on that point, not that far from using actual tables.

    floats will be here for a long long long time, why? because CSSP has been one huge clusterfuck right from the start and no one at the W3C is little more than a slumbering dinosaur that seems incapable of producing a spec in under decade…

28. I certainly wasn’t joking, JMB. Nor was I suggesting that the XSLT should be written by human beings in Notepad. We don’t edit our images in a hex editor, why be so precious about our stylesheets? I say this as someone who is extremely anal about my CSS, because I know that ultimately it has to be read and adapted by a human being. That’s what I think is silly.

    Designers who think that CSS is in any way fine as it is are—and I say this as kindly as possible—simply so resigned to its limitations that they have unconsciously lowered their standards and expectations to meet what CSS actually makes possible. The range of selectors it provides is passable, but incomparably poorer than alternatives; the complete lack of variables and sophisticated constraints, to name a few. The ALM is a big step in fixing one of these inadequacies, but in my opinion it doesn’t go nearly far enough. I’m suggesting XSLT not as a difficult new technology for neophytes to master, but as just one part of a possible alternative.

    to paraphrase myself from elsewhere, if people are still stressing about clearing floats in 2020, we really haven’t been working hard enough. My suggestion was thoroughly speculative; I’m wide open to better alternatives, just so long as the problems of today are actually fixed this decade instead of being swept under the rug.

Comments are closed.