Faux Absolute Positioning

by Eric Sol

125 Reader Comments

Back to the Article
  1. Dave, I restarted lighttpd. All seems OK now.

    Copy & paste the code below to embed this comment.
  2. No problem at all. I’ll try to investigate this as soon as i have some spare time. I gotta earn money too. As for the hacky thing, it’s between brackets. I was not expressing a point of view based on the current css specs but rather a personal point of view. Either way, as i said, great article snd promising technique. Hopefully Those minor problems will be solved.

    Copy & paste the code below to embed this comment.
  3. Hi, you say that “you cannot calculate the margin-left because you never know how many ems fit in 800 pixels” but there is an easy way around this. If you make the font size of the body 62.5% then 1em=10px. This makes it easy to make such calculations. Clearly, this is best done at the start of a site design, as it will affect all of the font sizes in the site! But, it is a good part of varnish-stripping and a useful technique to use anyway.

    Copy & paste the code below to embed this comment.
  4. It’s a nice article.
    thank’s to you and your team.

    Copy & paste the code below to embed this comment.
  5. it is okay if i changed, margin-left: -100%, become margin-left: -800px ? (assumed that my .line width : 800px)
    Thanks

    Copy & paste the code below to embed this comment.
  6. Milburn Thomas wrote in comment 42: “And of course the columns are still faux columns. A better solution would be to use display:table-row and display:table-cell but of course that doesn’t work in any of the main browsers.“

    Even better would be CSS Columns supported in all browsers. Then we wouldn’t need any complex layout techniques at all.

    Copy & paste the code below to embed this comment.
  7. The main advantage it seems to me for this technique is the use of overflow:hidden, but using overflow:hidden on floated elements would make them behave like absolutely positioned elements. Is there something I am missing?

    Copy & paste the code below to embed this comment.
  8. I noticed that if you add a min-width rule ( desired min-width + widths of left and right columns ) to the content div it keeps the center content from being completely collapsed when the browser window gets small…

    Copy & paste the code below to embed this comment.
  9. Hi,

    I tried both examples in IE6. In the first case, when the width of browser is reduced, the middle column disappears. In teh second example, on reducing width, some text in the middle column is lost.

    I am looking for an elastic 2/3 column layout with header/footer that does not collapse when height/width is minimised…

    Copy & paste the code below to embed this comment.
  10. In the first example, when you make the canvas smaller than the combined width of the left + right column, the middle column should disappear, since the width of this column is the remaining width. If you don’t want that to happen you should use other dimensions, like 30%-40%-30%.
    In the second example, remember the items have ‘overflow: hidden’. Therefore, words that are wider than the item itself seem truncated.
    All of this is expected behaviour that is easily adapted, e.g. use ‘min-width’.

    Copy & paste the code below to embed this comment.
  11. It’s always a bit of a bear to stare a complex grid-based layout in the face (read: anything elastic or fluid). This looks like it will take the bite out of grid-based layouts. Thanks!

    Copy & paste the code below to embed this comment.
  12. I admire the ingenuity of this scheme. Stepping back though, I wonder if folks have an opinion as to whether this line/item scheme is superior to tr/td. From a semantic standpoint I’d say “no, they are equivalent”?. Does this give us some great gain in layout ease or flexibility versus tables?

    Copy & paste the code below to embed this comment.
  13. Well, given MS Word’s poor handling of positioning and float, it’s no surprise that this technique is completely mutilated by Outlook ‘07.  It might look better in Outlook ‘03 or ‘00, though, since those versions use the IE rendering engine….

    Sadly, it’s back to tables for us email designers ):

    Copy & paste the code below to embed this comment.
  14. I came across the comparision with table based design a couple of times, especially from people complaining about ‘divitis’. I think faux is superior over tables for a number of reasons:

    • faux does not require the same amount of items in every line, like you have using td’s in tr’s (there’s no such thing as colspan here!), therefore the markup is more efficient and clean
    • faux gives far greater flexibility in handling what each cell ought to do compared to the rather rigid way tables are rendered
    • it complies with standards – using tables for layout does not
    • it eliminates a lot of the crossbrowser whitespace issues; tables do not

    Remember this technique is mostly suited for grid-based designs. You have to define a grid, which by definition implies rows and columns. But the flexibility is far greater.

    So Outlook ‘07 messed it up. What else is new? Sigh….

    Copy & paste the code below to embed this comment.
  15. Interesting approach. The toolkit is never full. I like.
    However – and I hope I’m not committing a faux pas here – the title seems a bit pretentious and, worse, misleading. Faux means “fake” does it not? Nothing fake here. And the author isn’t even French.
    Take your pick:
    Simulated Absolute Positioning
    Imitation Absolute Positioning
    Artificial Absolute Positioning
    But if we must go European, how about the old chestnut:
    Ersatz Absolute Positioning

    Sorry, I couldn’t help myself. Good article.

    Copy & paste the code below to embed this comment.
  16. Er… it’s broken in outlook?  When did it become a good idea to put CSS positioning (let alone other CSS) into HTML email?

    Copy & paste the code below to embed this comment.
  17. @comment 65:
    Faking full columns have been known as Faux Columns for “quite some time”:http://www.alistapart.com/articles/fauxcolumns/. Seems like ALA sometimes choose “funny”:http://www.alistapart.com/articles/flashsatay “names”:http://www.alistapart.com/articles/semanticflash for the articles. I don’t mind.

    Copy & paste the code below to embed this comment.
  18. I think I am going to ditch Blueprint for this method. It looks more simple and semantic. Great job!

    Copy & paste the code below to embed this comment.
  19. Drupal can’t to connect to database, looks like something broken.

    Copy & paste the code below to embed this comment.
  20. Great discovery Eric! Thank you for sharing it!
    I will surely test it and tell you if there’s something wrong in a specific case…

    One question: you put display: block; on .line, why?
    To use the same class again somewhere on other non-block elements or what?
    Because <div> is block by default. I removed it and couldn’t find any difference in FF, IE6 + 7, and Safari/win.
    I’m eager too know why you put it for.

    Copy & paste the code below to embed this comment.
  21. Is display: block necessary on <div class=“line”> since that is already a block-level element?

    Thanks!

    Copy & paste the code below to embed this comment.
  22. You folks are right: the display block is not necessary at all, it is a leftover from earlier experiments. Sorry for the confusion.

    Copy & paste the code below to embed this comment.
  23. I work at an internet development company and i had the very problem this article talks about. I did not want to use tables to create the layout of the main part of the page. After i read this article i immediately applied the concept and it took care of any problems i had and imitates the old table look exactly and after all this is the result i wanted.

    Copy & paste the code below to embed this comment.
  24. Following the same concept, I had no problem getting this to work with fixed pixel width columns. Tests across FF2, FF3, IE7, IE6, Opera and Safari. If this continues to hold up through various testing, this will be great, as there’s no more footer clearing issues.

    Copy & paste the code below to embed this comment.
  25. @“Peter Labrow”:“http://alistapart.com/comments/fauxabsolutepositioning?page=6#53” :

    If you make the font size of the body 62.5% then 1em=10px

    This is only true if the user’s default font size is 16px.  Yes, it’s going to work most of the time, but you can’t count on it.  Even adjusting the font size while on the page (e.g., Command-+) will affect how many pixels correspond to 1em.

    It’s generally safest not to mix relative units (em, ex, percent) with absolute units (px, pt).

    Copy & paste the code below to embed this comment.
  26. Thank you for this article, but I would still recommend, above this technique, the table.

    Now, before you assume that I must be a (1) newbie or (2) Philistine, know that I am a (1) professional web programmer and (2) lover of theory over practicality (to see that, read “this”:http://combatentropy.com/coming_back_to_the_table )

    Copy & paste the code below to embed this comment.
  27. In my experience tables have caused more pain than DIVs due to the restraints in layout changes and numerous white space issues. But maybe it’s just me. :)

    Copy & paste the code below to embed this comment.
  28. Thanks for the great technique. I’ve just successfully implemented it on “my blog”:http://mark.tranchant.co.uk after painfully figuring out that:

    • “Movable Type”:http://www.movabletype.com already uses the .item class, so I needed to change the name;
    • Mis-spelling the replacement item class name on one of the items causes horrific, confusing errors.

    I’m looking forward to the next time I need to make a complex form, so I can try using it there.

    Copy & paste the code below to embed this comment.
  29. It’s nearly impossible to ask Designers to design within a grid. As I’d love to use Blueprint CSS, it doesn’t always work very well when the Designs I slice and code are 900px wide with random layouts. Not to mention they require fixed font sizes, complex gradients and stuff you wonder… why not just Flash?

    Frankly, tables never work as well as they theoretically could. They don’t make anything “faster” and usually create a lot of bloat. I do use tables for… tabular data. That makes perfect sense. But not for containing layout.

    Also, I checked all the examples from the article on the iPhone, and looks good! Something to consider using. However, I’m usually looking for the fastest way to do something best. If I could only convince more Designers to use a grid…

    Copy & paste the code below to embed this comment.
  30. “The content of the boxes may overlap (depending on other variables such as overflow: hidden) but that’s all—and in our view, it’s better to risk overlap than risk breaking the whole layout.”

    I think it’s better if the layout breaks, but the content is still visible. For example, if a user zooms text due to issues with impaired sight then overflow:hidden will chop the content. Otherwise it’s style over substance.

    Copy & paste the code below to embed this comment.
  31. @Mark Tranchant – Your’re page is not rendering the HTML properly (as in I can see only the HTML).

    Always been slightly concerned about using overflow:auto though in case of any scrollbars appearing randomly. I couldn’t spot any with this technique though so very promising :)

    Copy & paste the code below to embed this comment.
  32. I use position relative and negative margins in a very similar way to structure my “perfect liquid layouts”:http://matthewjamestaylor.com/blog/perfect-3-column.htm

    Copy & paste the code below to embed this comment.
  33. I tried it and it works flawlessly. This already saved me from a lot of bugfixing especially in IE6. I can also say that in many cases it takes less time to change a simple existing float to fauxabsolutepositioning, than to look for a way to solve some IE bugs. Thanks again.

    Copy & paste the code below to embed this comment.
  34. I have posted a (detailed and respectful) argument against this technique to my website, CSSnewbie. I would invite everyone to read it and respond in the comments if you’re interested in continuing the debate:
    http://www.cssnewbie.com/argument-against-faux-absolute-positioning/

    Copy & paste the code below to embed this comment.
  35. How about a cell that spans several rows?

    Copy & paste the code below to embed this comment.
  36. I’ve been looking for information about this for some time… Thanks :D

    Copy & paste the code below to embed this comment.
  37. I used your technique along with a slantastic :) layout created by Eric Meyer. I had to use your technique because of the way the slantastic layout was created if you get a chance I would love to hear your response. Thank you.

    P.S. While some people are trying to call your new technique not worthwhile im almost positive they did not understand the reason you created it. It wasnt necessarily for people who already knew everything they needed to know but for those individuals who needed a solution to a common problem with both of these positioning techniques. Thank you.

    jeffreyrichardson.publishpath.com

    That is where to find the layout and i would love to hear your response. Thank you.

    Copy & paste the code below to embed this comment.
  38. @Mark: You can’t do that directly, but you can play with the height and top of elements or you can use nesting (creating an item that itself acts as a canvas to contain two or more rows) to achieve the same effect. It would take some puzzling, but it’s definitely doable.

    Copy & paste the code below to embed this comment.
  39. Hoi Eric!

    Very interesting, and nice way of thinking. I`d really like to see some sites built using this method.. to see if we can break them! :)

    Good work fella.

    Copy & paste the code below to embed this comment.
  40. Has anyone tried this to see how it behaves on various Mobile Devices? Would be interesting…

    Copy & paste the code below to embed this comment.
  41. I used sap and all looks great except in IE6. When the page loads, the left column appears on the far right UNTIL you mouse over a link. Then it jumps over to the left where it is supposed to appear. http://ninja-dev.photonicsg2.net/sap.php Any ideas??

    Copy & paste the code below to embed this comment.
  42. I decided to make the site im working on, which is my personal site it isn’t much but its still getting settled, available and looking decent in ie 6. I used this technique just because i didnt feel like changing all the markup just the minor parts of the css. It worked great in the site i was working on. If anyone wants to get in touch with me i have a working form on the site.

    jeffreyrichardson.publishpath.com

    Copy & paste the code below to embed this comment.
  43. Have to try it out next time I’m doing a layout from scratch.

    Copy & paste the code below to embed this comment.
  44. While using this technique the past week I couldn’t help to think I had a case of divitis. Seems like quit a bit of presentational mark-up is needed in order to get the end result.

    However, that aside I applaud your discovery.

    Copy & paste the code below to embed this comment.
  45. <table class= “canavas”>
      <tr class=“line”>
      <td class=“item”></td>
      <td class=“item”></td>
      <td class=“item”></td>
      </tr>
    </table>

    Copy & paste the code below to embed this comment.
  46. This is what it was made for.. to simulate a grid layout without using tables. Todd, divitis is when you are using divs for everything.. a prime example is navigation containing solely divs. The presentational markup is not existent. He is using a div basically for each ‘cell’ to create the effect. What you are also pointing out was pointed out in a prior post. I think Eric wanted to do what he could while using standards based code. Tables are for tabular data.

    Copy & paste the code below to embed this comment.
  47. I’ve been designing hardware and software for thirty years now. I think I have a track record of dealing with complexity. I’ve tried on and off to use CSS and succeeded as long as I keep it real, real simple.

    I’ve been trying to implement a simple version of this technique for the past two hours. I’ve read the article several times, top to bottom. The example in the text shows only one item so it does not match the diagram which has three items. When I look at example one it is so full of other classes, IDs and HTML markup for forms that I have not been unable to separate the wheat from the chaff.

    I wish the author had presented a grid with one line containing one item and a second line with two items and then a third line with three items. Then I think I could perhaps have been able to reverse engineer how the margin percentages interact and other parameters interact and then be able to extrapolate how to modify them for my own use.

    Sorry to carp so much. This article was intended to present a technique for those already skilled with CSS. I think I’ll just go back to using tables to line things up the way I want them. It may not be semantic but at least it works for me.

    Peace,

    Rob:-]

    Copy & paste the code below to embed this comment.
  48. Great Article – I just recoded a site with which I had some problems.  Unfortunately (for me) text is not visible in DWCS3 or DWCS4 beta Design View.  I validated my CSS and HTML at W3C and all validated.  We use DWCS3 to quickly paste text to templates so functionality in DW is important.

    It appears that DW does not like the negative margins as it appears that the content is off to the left of the design view window.  I can get it back if I temporarily modify the style sheet or the html but that’s not really helpful.

    If anybody has any suggesions I’d appreciate seeing them.

    Copy & paste the code below to embed this comment.
  49. Divitis is indeed the first impression users seem to get when trying this… but if you use the principles and adapt the code a little, its a very easy, very adaptable system.

    For eg, you dont need to put

    <div id=“listholder” class=“item>
    <ul>
    <li>list1</li>
    </ul>
    </div>

    You can style the ul directly, thus removing the container :

    <ul id=“listholder” class=“item”>
    <li>list1</li>
    </ul>

    any divitis there? Nope.

    We`ve used this at work, and everyday we find something new and impressive with the way it stands up to moulding and shaping of the code.

    Good work fella!

    Copy & paste the code below to embed this comment.
  50. Robert, i can help explain the principle if you want. I can see how it can be confusing to get your head around, but once you’ve got it, it really is very useful.

    I tried to find an email address through your website, but couldnt. Let me know if you need a hand.

    Copy & paste the code below to embed this comment.
  51. Robert, i can help explain the principle if you want. I can see how it can be confusing to get your head around, but once you’ve got it, it really is very useful.

    I tried to find an email address through your website, but couldnt. Let me know if you need a hand.

    Copy & paste the code below to embed this comment.
  52. Pretty big help in positioning techniques. This guy knows his stuff! Keep it up!

    Copy & paste the code below to embed this comment.
  53. There is a bug at IE6… when you place a background image in the middle rightest column, the column disappear.

    Copy & paste the code below to embed this comment.
  54. I love this technique, although I know there are some arguments against it (google faux positioning). In fact I love it so much that the new base theme for Drupal I’m making is based on this technique and it works great! In the first website I did with this base theme I’m having a problem, when I added a table of contents that uses same pahe links, whenever I clicked on a section all of the content in the main div that came before it, dissappeared. If I give overflow:scoll just to the main div, I get a scrollbar in the div and I can see the content scrolling up. This is pretty much a deal braker for that particular theme I’m building because I really need table of contents because of the amount of content the pages in the site has. Is there any way to be able to use this technique with table of contents?

    Copy & paste the code below to embed this comment.
  55. I can confirm that Rafael is correct with the fact that in IE6 a background image on one of the main ‘columns’ (item) will throw off the layout completely. Mousing over a link snaps the columns back to where they should be, but obviously that’s no solution.

    For now the best solution I can find is to put the background image on an element within the column/item instead.

    Strangely, using a background colour doesn’t cause the same glitch.

    Copy & paste the code below to embed this comment.
  56. Nice article and interesting technique! Just one minor typo:

    t lets us play with position: overflow (without breaking the grid!).

    My first impulse is always to doubt myself, but I’m sure that’s not a legitimate value for this property! :)

    Copy & paste the code below to embed this comment.
  57. Thanks Buddy! this would definitely help us to fix the positioning problems.

    Copy & paste the code below to embed this comment.
  58. from the examples: scales poorly past a certain point. or was this just in the examples?

    Copy & paste the code below to embed this comment.
  59. I have used this to redo the css for a site that went live earlier this year,

    My only problem is I cannot work out how to stop the menu in the left hand column from being displayed. Ive tried

    #sidebar-left.item column, #ddblueblockmenu
    {
    display: none;
    }

    and various combinations but it still gets printed . Any ideas

    Copy & paste the code below to embed this comment.
  60. Ignore above having bad day and using wrong folder for style sheet access.

    doh!

    Copy & paste the code below to embed this comment.
  61. This is awesome!  I just starting fooling around with it and I can already see how efficient this is.  Thanks for the article!!!

    J

    Copy & paste the code below to embed this comment.
  62. I really just wanted to make a simple personal site. But the complexity of doing just the simplest of things have such a myriad of choices that I just want to throw my hands up in the air and scream. I thought CSS was to be a universal solution that would enable once and for all the ability for everyone to be on the same level playing surface. But as it turns out, for every solution there is 10 opinions that state the opposite or the same but different approach. I see why even though FrontPage was so hated by so many, that it really made things simple. That is, until we went to Expression versions. I guess at least everyone is in the same but different bucket of confusion. Ultimately, I guess my question is: have we really come that far? Just seems like everyone is just arguing a new subject, but in reality it just the same old stuff – no one agrees on anything. Why has CSS made everything so complex? When its original intent was to simplify. Maybe we should all start from scratch again!

    Copy & paste the code below to embed this comment.
  63. There will be a problem when I add a background-image to that DIV in IE 6. All DIVs that contain a bckground-image will be kept in the right and not in the correct position.

    Do you have any method to solve this bug?

    Copy & paste the code below to embed this comment.
  64. Thank you for publishing this great tip!! I’ve been trying to implement tableless CSS design and this makes it so much easier. Keep the great tips coming!

    Copy & paste the code below to embed this comment.
  65. Thanks for sharing this concept. It is very interesting for me as I used to spent hours fixing some broken css layouts in IE 5 & 6. I will try this layout technic in one of my next projects.

    Copy & paste the code below to embed this comment.
  66. This is a phenomenal technique, but I’ve run into an issue that a few others have mentioned. To reproduce this error, use a background-image on an element with class-name “item” and see how IE6 reacts.

    It appears that this is a “Peek-a-boo bug”:http://www.positioniseverything.net/explorer/peekaboo.html – the element is invisible when you load/reload the page, but suddenly reappears when you resize the browser window.

    I tried to use the “clearfix”:http://www.positioniseverything.net/easyclearing.html approach to no avail and ended up refactoring my layout to make use of the sap-content element for background images.

    Hopefully this extra info will help someone smarter than myself to find a more robust solution.

    Copy & paste the code below to embed this comment.
  67. I’ve been building websites for years and consider myself pretty nifty with CSS, but a method like this just never occurred to me! It looks robust and pretty straight forward and I’ll deffinitely give it a try next time I need to do a reasonably complex layout. Cheers guys!

    Copy & paste the code below to embed this comment.
  68. Thanks Dude! It would definitely help us. Thanks a lot :D

    Copy & paste the code below to embed this comment.
  69. Hello, I try this layout trick and i found problem with combination “overflow:hidden” and scroll to id inside page from url hash. You can see it on example from this article.
    With url hash: “http://fapdemo.solide-ict.nl/home#edit-submit”:http://fapdemo.solide-ict.nl/home#edit-submit
    Without url hash: “http://fapdemo.solide-ict.nl/home”:http://fapdemo.solide-ict.nl/home

    Have you somebody any idea?
    Ps: I’m sorry for my bad english ;-)

    Copy & paste the code below to embed this comment.
  70. That’s an awesome job at problem solving…I’ve wondered how to do something similar to this for awhile, because I hate using tables for layouts because they’re slow-loading, and with divs I felt like I was stuck into only creating 2 column-layouts for fear of creating broken layouts if the elements end up growing too much or the padding/margins aren’t quite the same for every browser.  Good solution.

    Copy & paste the code below to embed this comment.
  71. I’m very intrigued by this approach, and so far testing it against various browsers has worked fine… except for one IE6 (?) glitch: when using a two-column layout with Faux Absolute Positioning, and IE6 is running on a Virtual PC, the left column frequently (but not always) gets displayed to the far right. For more info see: “Anyone seen image positioning problems with IE6 running on a Virtual PC?” on MSDN IE Web Dev forum…

    Copy & paste the code below to embed this comment.
  72. My IE6 layout problem had already been reported (although apparently not yet completely resolved). I must have accidentally jumped past those posts…

    But knowing that it’s aggravated when running under VPC may shed some light on how someone (smarter than me) might come up with the best work-around.

    Copy & paste the code below to embed this comment.
  73. Nice article, and nice techniques. I haven’t sen this approach before, and I will try it out.

    I’ve been wondering similar things when it comes to multi-column layouts, and I have an idea that I’ve been using that I’d lke to run past you, or anyone else.

    I’ve been using <span> elements with the CSS display: inline-block. In combination with the vertical-align: top; property, I can achieve something very much like two or three table cells sitting next to eachother in a row, since they are sitting on the same text baseline (inline) but can take width properties (block). It’s a nice combination of the two.

    The problem is, if you stick a DIV inside of these spans, the layout will not validate. Since Spans are default inline, is it not allowed to insert a block-level div inside of them. The reason why I use Spans in the first place is that as early as v5, inline-block is supported in IE only on elements that are by default inline. So, spans, anchors, img tags, etc… can be inline-block, but DIVs can not.

    So, the question is, while this is a powerful layout tool, is it off limits since it technically is not allowed? Will the inline-block property eventually go the way of the dodo and cease to be supported?

    Anyone?

    Copy & paste the code below to embed this comment.
  74. Very useful article. I´ll tell my friends in the office about it. Thanks alot. Markus

    Copy & paste the code below to embed this comment.
  75. Hi Eric!
    I have stumbled upon this technique while looking for a solution to my problem. I am still not sure if/how I can use it. I think you may have had the same issue. The users have a “screen designer” for a form layout. I need to replicate that in the browser. Now it’s done with absolute positioning, and the problem is that the footer, which comes right after the form’s content, now gets placed to the top because of absolutely positioned elements in the form that don’t provide the form with a height. Can I move the footer in it’s place by still positioning the elements inside the form in the same positions the user did? If so, how. I seem to not getting exactly the point.
    Thanks!

    Copy & paste the code below to embed this comment.