{"id":157,"date":"2008-06-28T13:10:58","date_gmt":"2008-06-28T18:10:58","guid":{"rendered":"http:\/\/cssnewbie.com\/?p=157"},"modified":"2008-06-28T13:10:58","modified_gmt":"2008-06-28T18:10:58","slug":"argument-against-faux-absolute-positioning","status":"publish","type":"post","link":"https:\/\/cssdeck.com\/blog\/argument-against-faux-absolute-positioning\/","title":{"rendered":"An Argument Against Faux Absolute Positioning"},"content":{"rendered":"

\"\"<\/a><\/p>\n

A week or so ago, Netherlands-based Eric Sol published an article on A List Apart<\/em><\/a> titled \u201cFaux Absolute Positioning,\u201d 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\u2019ve been having on CSSnewbie<\/a> recently, I thought I would respond publicly so that others might have the option of offering their opinions as well. But if you haven\u2019t read Eric\u2019s article<\/a> yet, please do so before responding, so you have the full picture and not just my interpretation of things.<\/p>\n

Mr. Sol\u2019s development of the Faux Absolute Positioning technique was born of frustration in trying to use the two dominant positioning techniques: absolute positioning elements,<\/a> 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. <\/p>\n

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 \u201coverflow: hidden\u201d 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 \u201cthe content of the boxes may overlap,\u201d but that \u201cit\u2019s better to risk overlap than risk breaking the whole layout,\u201d I don\u2019t understand what makes using \u201coverflow: hidden\u201d on floated elements so detrimental or different.<\/p>\n

But that isn\u2019t my real concern with Eric\u2019s argument for the technique. I\u2019m most concerned with the XHTML structure required to actually implement<\/em> the technique. As I\u2019ve mentioned before, I\u2019m a bit of a code purist.<\/a> 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\u2019s 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.<\/p>\n

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:<\/p>\n

<div id="canvas">\n  <div class="line">\n    <div class="item" id="item1">\n      <div class="sap-content">content here<\/div>\n    <\/div>\n  <\/div>\n<\/div><\/pre>\n
Does that structure look strangely familiar? It should \u2013 it\u2019s a table, converted into divs. The \u201ccanvas\u201d div functions as the table container, while the \u201cline\u201d class of divs acts as rows and the \u201citem\u201d divs behave as table cells. In fact, this technique actually uses an additional<\/em> div (\u201csap-content\u201d) inside of each \u201ccell,\u201d bloating the code even further. Compare it to this table-based reimplementation: <\/p>\n
<table id="canvas">\n  <tr class="line">\n    <td class="item" id="item1">\n      <div class="sap-content">content here<\/div>\n    <\/td>\n  <\/tr>\n<\/table><\/pre>\n
Now, I understand that there is a semantics argument to be made here. Mr. Sol probably didn\u2019t 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<\/em> using divs and classes rather than \u201ctr\u201d and \u201ctd\u201d tags. <\/p>\n
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 \u201ccells in [a] grid\u201d is telling: the author really just wants to use a table, but can\u2019t justify it semantically. Thus, he develops a \u201csemantic\u201d alternative that, instead of suffering from non-semantic code, suffers from divitis, classitis, and code bloat<\/a> instead.<\/p>\n
I wrote an article a couple of weeks back on building a calendar using lists instead of tables<\/a> 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<\/em> 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. <\/p>\n
The Faux Absolute Positioning technique, by contrast, requires at least as much<\/em> XHTML as an equally complex table would require, and may actually require significantly more<\/em> code because of the additional div inside each \u201ccell.\u201d 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 \u201ctable-less\u201d 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.<\/p>\n
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\u2019s layout has reached the level of complexity wherein the only viable options are to use a table to create a grid or reinvent<\/em> a table to the same end, perhaps it\u2019s the design of the site, and not the code behind the site, that should be reconsidered.<\/p>\n
Now, I don\u2019t want to be seen as attacking Mr. Sol\u2019s 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\u2019ve had my say, I would love to hear what you think about all this.<\/p>\n
Share and Enjoy !<\/h3>
0<\/span><\/span>Shares<\/small><\/div>
<\/i>0<\/span><\/span><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i>0<\/span><\/span><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i><\/a><\/span><\/div><\/div><\/div>","protected":false},"excerpt":{"rendered":"
Mr. Sol\u2019s development of the Faux Absolute Positioning technique was born of frustration in trying to use the two dominant positioning techniques: absolute positioning and floats. However, I fear his cure might be worse than the disease. […]<\/p>\n
Read Article<\/a><\/p>\n","protected":false},"author":18,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[166],"tags":[205,240,260,323,334,130],"_links":{"self":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/157"}],"collection":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/comments?post=157"}],"version-history":[{"count":0,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/157\/revisions"}],"wp:attachment":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/media?parent=157"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/categories?post=157"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/tags?post=157"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}