An Argument Against Faux Absolute Positioning

Published June 28, 2008 by CSS Newbies.

A week or so ago, Netherlands-based Eric Sol published an article on A List Apart titled “Faux Absolute Positioning,” where he outlines a new system of element positioning that he has developed. Shortly afterwards, a reader wrote to me and asked my opinions on the technique. In the spirit of continuing the fantastic conversations we’ve been having on CSSnewbie recently, I thought I would respond publicly so that others might have the option of offering their opinions as well. But if you haven’t read Eric’s article yet, please do so before responding, so you have the full picture and not just my interpretation of things.

Mr. Sol’s development of the Faux Absolute Positioning technique was born of frustration in trying to use the two dominant positioning techniques: absolute positioning elements, and floating elements. His argument against using absolute positioning for page layout is that it causes any containing elements to collapse (because the element is pulled out of the document flow), which can cause all sorts of problems. This, I will entirely agree with.

However, his argument against using floated elements is that content changes can cause the width of the element to change, which can in turn wreak havoc on float-based layouts. This is partially true. Left to its own devices, for example, a 500 pixel wide column containing a 550 pixel wide image will probably ruin a float-based layout. However, in practice simply applying a rule of “overflow: hidden” to that column would have eliminated any column-resizing problems in nearly all cases, simply cutting off the side of the image when it reached the edge of the column. And considering that using Faux Absolute Positioning relies on an understanding that “the content of the boxes may overlap,” but that “it’s better to risk overlap than risk breaking the whole layout,” I don’t understand what makes using “overflow: hidden” on floated elements so detrimental or different.

But that isn’t my real concern with Eric’s argument for the technique. I’m most concerned with the XHTML structure required to actually implement the technique. As I’ve mentioned before, I’m a bit of a code purist. I believe in using the least amount of code to the greatest effect, and this is especially true when it comes to XHTML. A CSS file can be cached and reused by the browser over an entire website, reducing the strain on a user’s bandwidth. However, each new page a user visits requires them to download an entirely new XHTML page, regardless of how similar that page is to the previous one they visited. In my mind, this is the strongest argument behind switching from presentation-heavy HTML (tables, font tags, etc) to semantic XHTML (and using CSS for presentation) in the first place.

Because of that, I wince when I see the XHTML used to implement the Faux Absolute Positioning technique. Take a look at the sample offered:

<div id="canvas">
  <div class="line">
    <div class="item" id="item1">
      <div class="sap-content">content here</div>
    </div>
  </div>
</div>

Does that structure look strangely familiar? It should – it’s a table, converted into divs. The “canvas” div functions as the table container, while the “line” class of divs acts as rows and the “item” divs behave as table cells. In fact, this technique actually uses an additional div (“sap-content”) inside of each “cell,” bloating the code even further. Compare it to this table-based reimplementation:

<table id="canvas">
  <tr class="line">
    <td class="item" id="item1">
      <div class="sap-content">content here</div>
    </td>
  </tr>
</table>

Now, I understand that there is a semantics argument to be made here. Mr. Sol probably didn’t want to use a table because, semantically speaking, a table should contain tabular data and nothing more. But the problem is, the Faux Absolute Positioning technique simply reimagines tables using divs and classes rather than “tr” and “td” tags.

The real benefit of the technique, Eric states, is that “we can align every item to a predefined position on the grid […] but items still affect the normal flow,” and his insistence on thinking of elements in a page as “cells in [a] grid” is telling: the author really just wants to use a table, but can’t justify it semantically. Thus, he develops a “semantic” alternative that, instead of suffering from non-semantic code, suffers from divitis, classitis, and code bloat instead.

I wrote an article a couple of weeks back on building a calendar using lists instead of tables that ended up sparking a great deal of thoughtful debate of the nature of calendars, the semantic meaning of tables, and the overuse of lists in modern web design. I plan to respond to that debate more fully next week in a separate article, but one point I plan to make then is worth mentioning now: I believe in using semantic code wherever possible, but I also believe in minimizing code wherever possible. One of the (several) reasons I was so intrigued by the possibility of a list-based calendar is that I knew I could create it with less XHTML than a table-based calendar would require, reducing the bandwidth costs of whatever website it was implemented on.

The Faux Absolute Positioning technique, by contrast, requires at least as much XHTML as an equally complex table would require, and may actually require significantly more code because of the additional div inside each “cell.” Depending on the complexity of the site using this technique, we could be talking about 15% greater bandwidth costs on every single page of the website, compared to an identical site using a table for layout. Admittedly, the website could still tout a “table-less” design, at least in the narrowest definition of the phrase. But because of its insistence on rows, columns, and a clearly defined grid, it is at least a table in spirit, and may in fact be more complex and weighty than a table would be in practice. And if a designer is utterly committed to having the rows, columns, and cell-based grid that this technique permits, I would argue that the table tag deserves a second look, if for no other reason that to reduce page size.

At the end of the article, the author does admit that this technique is probably only sufficiently rewarding to be used on rather complex page layouts. But if a site’s layout has reached the level of complexity wherein the only viable options are to use a table to create a grid or reinvent a table to the same end, perhaps it’s the design of the site, and not the code behind the site, that should be reconsidered.

Now, I don’t want to be seen as attacking Mr. Sol’s person or work. I respect the amount of time it must have taken to develop the Faux Absolute Positioning technique and the ingenuity that went into the CSS. My goal here is to simply encourage a debate on the subject. And now that I’ve had my say, I would love to hear what you think about all this.

36 Responses

  1. peter (reply)

    > “it’s better to risk overlap than risk breaking the
    > whole layout,”

    Or, this techniques absurdity in the nutshell. Show me *single* reader who prefers overlapping unreadable text to readable text with layout that may be a few pixel off compared to designer’s idea.

  2. Pingback: Kitchen Stools at Diner Bars at Section4U

  3. Heather (reply)

    Great perspective on the original article. I read the ALA article with interest, because in time-constraint situations, I’ve fallen back to the dreaded “table” to just get something done. Whether it’s my lack of CSS knowledge or my lack of development time is a matter of debate, but if we’re using semantic code just to reinvent the table, as you argue, maybe the table wasn’t so bad to begin with.

    Not nested tables, shudder the thought.

  4. Justin (reply)

    While I try to avoid them, I don’t think tables are necessarily bad for a significantly-complex form — the very thing inspiring Mr. Sol’s CSS technique. It’s certainly arguable that forms are tabular data.

    However, he does also mention that his use case involved dragging and dropping elements onto a canvas. To me, that implies that not only was the technique designed to maintain layout, it was also designed to be easily manipulable by script. I know I’ve certainly used less-than-semantic markup for scriptability in the past, and in some cases, it’s unavoidable.

  5. Chris Coyier (reply)

    I’m not sure I’d say the technique is as problematic as using tables for layout, but I agree that it’s a little heavy on wrapping divs.

    With a complex layout using tables, if you were to just yank out a <td> at the top of the layout, it would probably be a huge disaster and ruin the entire layout. The elements in a layout using this faux absolute positioning aren’t quite that fragile, you can remove them and resize them with a bit more layout resiliency.

  6. Divya (reply)

    I agree with you. I think the key to the faux absolute positioning working was “overflow:hidden” which would make any “floated” element work without those bloated divs. I did not see any merit over using usual techniques.

  7. drx (reply)

    The problem with “overflow: hidden” is that it cuts off overflows on all sides of the box. Usually you want to cut off the overflow only on the right side and expand the box dynamically downwards.

    Also, if you want to use floats with liquid layouts, most of the time you will end up with the same amount of wrapping divs.

    In short, this method isn’t ideal but floats suck as well :) I would much more prefer that paddings are not added to the width of a box, as it is with the current box model. If the padding would really go inside a box, it would be trivial to write stuff like

    width:30%;
    padding: 0.5em 1em;

    and have the next container with 70% width float next to it. But the praised standards go in another direction. Until this works, anything is just a hack.

  8. Ken Snyder (reply)

    One thing you didn’t consider is that Eric came up with this method to address the pains of creating apps that allow wysiwyg content building. It is very difficult to programmatically build tables to surround content that users drag to arbitrary positions.

    Also, as was hinted above, tables require that data be in columns with the same width in every row. Yes, you can use colspan and rowspan, but in complex layouts you’ve lost a lot of the semantic meaning of rows and columns.

    Eric didn’t have any great examples, but I imagine FAP is a great choice when it comes to magazine-type layouts. Sit down with a magazine or newspaper and try to slice it semantically into a grid. Then imagine that the text on that page is dynamically generated so you don’t know how much space the text will occupy.

    Similarly, it is hard to make magazine-type layouts with floats or absolute positioning, especially if you don’t know the exact length of the text copy.

  9. Pingback: Flexible, Grid-Like Layouts in CSS - Ken Snyder

  10. Rowan (reply)

    There are dozens of IE6 bugs caused by basic floats that are very difficult to work around, or require several hacks to fix. The good thing about FAP is that it completely (?) negates all these issues and it doesn’t require browser-specific or bloated CSS.

    FAP is best used for multi-column layouts, not for replacing tables. I can’t believe it would increase the size of your HTML by “15%”, as you only need to use it once for the overall layout. That comes to about 150 bytes of data on its own, with the CSS being roughly 500 bytes. Of course one may decide to use the technique all over their pages, but no one should need it that much.

    Some people don’t like having “too many” divs in their HTML, but everyone has to throw in a wrapper div here or there. Adding two or so extra wrappers won’t hurt in any significant way.

    In my opinion, Divitis is only a problem in cases where headings and lists (etc) are wrapped in divs instead of their respective elements.

    When you’re working with a flexible CMS and producing several websites every week with wildly varied layouts, you’ll be grateful when you can avoid changing the HTML and just work from stylesheets.

    I’ve tried virtually every type of layout over the years; tables, floats, negative margins, etc, and so far FAP has been the most stable and flexible method I’ve come across.

    If you don’t encounter any issues with your current layouts, then simply ignore Faux Absolute Positioning. For those who can’t put up with all the browser quirks, you should give this a try at least.

  11. Rob (reply)

    Great comments so far, all!

    I will admit that this sort of a technique would probably be a godsend if you were building a dynamic layout, wherein the pieces had to be movable by the user. I can see where this technique would make things vastly easier there. And I think Chris made a good point where ~removing~ elements from the page would be easier using this technique than with tables.

    However, I don’t agree that this technique is better simply because it doesn’t require as much CSS, or as many CSS-based fixes for IE. CSS files are cached: they’re loaded once by the browser, and then not downloaded again until a new version of the file comes along. That means you download a CSS file once, and you’re good for the rest of the site.

    By comparison, you’re stuck downloading every page of a website, regardless of how similar in XHTML they are. As such, if I’m going to have bloated code somewhere, I’d vastly prefer it in the CSS than in the XHTML, if purely for bandwidth reasons.

  12. Jeffrey (reply)

    I work at a company that offers a pretty amazing cms. When im cutting that cms there are some cases that i need to anticipate certain things that a client may do. They are putting in the content not me. I have an idea and a comp and thats it. This technique has actually came in really handy. On clients pages i dont use it on every one i used floats but when it comes to certain things sometimes its tables or nothing and im not going to put a table inside the cms where the client will be putting content.

    I understand what you are saying but the few times i have used this i felt a little better knowing i used css and not a table. I have nothing against tables i’ve just went through the everything in a table stage and its not pretty. Even with this extra bit of code no one who i’ve worked with has had any trouble going through the document.

    The one layout i did use it for all my content was a strange idea i had when i saw eric meyer slantastic. I used that layout with Eric Sol’s faux absolute positioning. I could then style the elements how i needed them and they would be easy to use in a cms without any overlapping at the footer.

  13. Rob (reply)

    Since you did not provide detailed working examples, I can not evaluate your clams. I’d really like to see the code you would use to create the two examples in the ALA Faux Positioning article.

    I do know that I can not afford the time to test my designs on every browser under the sun. Since I’m trying to write code that can dynamically generate CSS and XHTML, I’d be quite interested in your technique if it avoids all the browser dependencies and has sufficient flexibility for what I’m doing.

    Peace,

    Rob:-]

  14. Suzy (reply)

    It’s not quite new – similar to my own “Flexi-Floats” and http://blog.html.it/layoutgala/

    (note: the hacks in mine are no longer required either – I wrote that back in 2003/2004 when NN6 and IE/Mac were still a support issue ;))

    Your perspective, might also be a little skewed. When you say that this uses more divs than a table structure, it doesn’t. You include the canvas div as equivalent of the <table> element.. I would venture that it’s not it’s simply a wrapper div. If you were to have more than one table on the page to gain the non-nested but differing columns/grid look it would be different:

    [table class=”line”]
    [tr class=”item” id=”item1″]
    [td class=”sap-content”]content here

    and where is a table’s flexibility when it comes to re-ordering the columns (per Layout Gala) or the dragging flexibility the author says he needed

    Floats weren’t built for layout anymore than tables were, it’s a hat tip to authors like Eric that at least there’s a choice :)

  15. tZ (reply)

    I agree with many of things your saying here. However, there are also ways which this technique can be implemented in a purists form. The wrapper is [optional]. You can avoid the wrapper by adding the padding to the items instead. However, if you do this you will need to account for it in your margins. It all comes down to the way the technique is implemented. I’m sure every purists here has build a similar structure just not with the same intension. That is really all that technique amounts to is a structure. If you have a similar structure using block level elements you can easily implement the technique without “unsemantic” mark-up.

  16. Cristian Deschamps (reply)

    I really like your point of vue.

    I do semantic and ligher code possible, and my mantra is KISS. Keep it stupid simple.

    Like in physics, simple idea always win.

    thanks
    -Cristian

  17. Debi (reply)

    I have read all of the comments on the ALA article & about half of the one here, but to date Eric’s FAP is the only “tableless fluid/dynamic multi column layout I’ve found that works w/o floats – something I need to reserve for content and image layout. Whenever I’ve used floats for multi column layouts, I’ve encountered numerous problems with placing images in newsletter articles, bios, etc. My only problem with it is what was mentioned in the ALA article’s discussion that editors such as Dreamweaver do not show any of the actual content (due to the negative positioning?) until you preview in the browser. I’m redesigning a site & am not sure I want to do the entire site in code view only. Any suggestions?

  18. Rob Glazebrook (Author) (reply)

    Debi: I’ve heard a rumor that the latest version of Dreamweaver (CS4) uses a far superior rendering engine to its predecessors. I don’t have a copy myself, so I can’t check (I’m two versions behind now), but if so that might solve your problem.

    Can anyone verify that Dreamweaver CS4 can accurately display complex layouts?

  19. Nick (reply)

    The only thing you forgot to mention in your article (and I didn’t read all the response posts) is the FAP’s ability to have liquid columns. Tables cannot.

  20. ian (reply)

    Now its 3 years later and if your like me your doing mobile ipad and screens which require adaptive /responsive css and flexible containers. Tables in my shop are for tables period. Not layout.

  21. www.rsvp-directmail.com (reply)

    That is really attention-grabbing, You are an overly professional blogger.
    I have joined your feed and sit up for in search of more of your fantastic post.

    Also, I’ve shared your website in my social
    networks

  22. Katia (reply)

    Hello There. I found your blog using msn. This is an extremely well written article.
    I’ll be sure to bookmark it and come back to read more of your
    useful info. Thanks for the post. I will definitely return.

  23. Antique Slot Machines for sale in USA (reply)

    After checking out a handful of the articles on your blog,
    I really appreciate your technique of writing a blog.

    I book marked it to my bookmark website list and will be checking back in the near future.

    Take a look at my website too and let me know what you
    think.

  24. Bernice (reply)

    Hello, Neat post. There’s a problem with your site in web explorer,
    would check this? IE nonetheless is the market chief and a good component to people will leave out your fantastic writing because of this problem.

  25. Jane (reply)

    Hello my loved one! I wish to say that this article is awesome,
    nice written and include approximately all vital infos.
    I would like to look more posts like this .

  26. ptpa.com (reply)

    of course like your web-site but you need to check the spelling on quite a few of your posts.
    Several of them are rife with spelling issues and I find it very bothersome
    to tell the truth however I’ll definitely come again again.

  27. http://z0q.us://littletikestrike754696 (reply)

    Hey! Do you use Twitter? I’d like to follow you if that would be
    okay. I’m definitely enjoying your blog and look forward to new posts.

  28. Teresita (reply)

    Today, I went to the beachfront with my kids.
    I found a sea shell and gave it to my 4 year old daughter and
    said “You can hear the ocean if you put this to your ear.” She put the shell to
    her ear and screamed. There was a hermit crab inside and it pinched her ear.
    She never wants to go back! LoL I know this is entirely off topic but
    I had to tell someone!

  29. Chloe (reply)

    Whats up this is kind of of off topic but I was wondering
    if blogs use WYSIWYG editors or if you have to manually code with HTML.
    I’m starting a blog soon but have no coding experience so I wanted to get guidance from
    someone with experience. Any help would be greatly appreciated!

  30. Valeria (reply)

    Excellent post. I was checking constantly this blog and I’m
    impressed! Very helpful information specifically the last part :) I care for
    such info much. I was seeking this certain information for a very long time.

    Thank you and good luck.

  31. seo (reply)

    I’d like to thank you for the efforts you have put in writing this blog.
    I really hope to check out the same high-grade blog posts from you in the future as well.
    In truth, your creative writing abilities has inspired me to get my own, personal site now ;)
    This info – An Argument Against Faux Absolute Positioning Is definitely magnificent saved as
    a favorite post posted to twitter :)))

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>