A List Apart Comments for Article: Faux Absolute Positioning

I heart positioning

Tue, 17 Jun 2008 10:19:03 GMT

It's been a while since I've seen any new CSS concepts, but this fills the spot perfectly. Thank you. With complex layouts I always end up with what seems like unnecessarily complex CSS, so an additional way of positioning is welcome indeed. Now I just need to clear some time of my schedule to try it out for myself.

Untitled

Tue, 17 Jun 2008 11:30:06 GMT

This was a good article and I applaud you at your solution, however. It seems very much like BluePrintcss which is based on the a grid layout also. It's also well documented and tested through out the community.

Nice ideea

Tue, 17 Jun 2008 11:32:36 GMT

Very intriguing. With every good (and pretty simple) ideea, the first though that arises is: "hmmm, how come i didn't though of this earlier myself?" This really seems to solve some complex layouting problems more easily. Thanks for the tip

to Stephen Hill

Tue, 17 Jun 2008 11:34:16 GMT

@Stephen Hill The thing is that Blueprint doesn't solve the issues that are highlighted here

great job

Tue, 17 Jun 2008 11:34:24 GMT

Great article Eric! Thanks for sharing your experience with us. I'm already using it and I love it.

Great article...

Tue, 17 Jun 2008 11:59:15 GMT

Fresh...and clean! This was a great article -- very informative.

Interesting article

Tue, 17 Jun 2008 12:07:23 GMT

Very interesting find you and your team did. The technique sounds very promising, and I will definately do some testing. From your article I get the impression that this solves the most annoying problems with the "two other techniques", and while not being a perfect solution, it works - as long as you are aware of the downsides. Good job :)

Sounds interesting

Tue, 17 Jun 2008 12:21:18 GMT

Great article, seems to be an effective and simple idea. I'll try it out as soon as possible.

Nice technique

Tue, 17 Jun 2008 12:38:29 GMT

My partner pointed me to your article, and I was just starting to cleaning my messy CSS job for an Joomla site. Well right now I'm thinking of rebuilding the main structure in this way to get all the advantages. I'm not thinking anymore, I'm going to do it if I come across problems of any kind I will let you know. Greetings, keep up the good work!

Neat

Tue, 17 Jun 2008 12:55:39 GMT

Always good to have another technique in the arsenal. Thanks.

Amazing...

Tue, 17 Jun 2008 13:02:24 GMT

It sounds amazing! We are always fighting with positioning and made it fully funtional with all browsers. Always had to use tricks, but this way sounds like a smart solution. I will try with a new design...

SOLID WORK

Tue, 17 Jun 2008 13:34:11 GMT

It seems that this technique possibly could merge some techniques without the cons. Will it be the Holy Grail 2.0???

Divitis

Tue, 17 Jun 2008 13:37:20 GMT

I always enjoy reading about new CSS techniques on ALA and I appreciate the robustness of this solution. However, I don't like the markup. In my opinion, it suffers quite severely from divitis. 3 div's for a header? No thank you. With lots of nested elements and a bit of CSS and browser knowledge, CSS will always get you there. The trick is to do it with as little unnecessary markup as possible.

And content can come first

Tue, 17 Jun 2008 13:38:03 GMT

It's looking rock solid. Great! Using the second example, I swapped item 6 and item 8 so the written content came nearer the beginning of the html order. It works, it looks exactly the same without having to change the CSS. Now, can I move line 2 above line 1...

Drupal question

Tue, 17 Jun 2008 13:58:34 GMT

You mentioned having implemented this technique into a Drupal theme. Is that theme available somewhere? I'd love to have a look as I'm currently designing a Drupal-based site with header/footer/3 columns in between. Thanks for the article.

Mix and Match works too

Tue, 17 Jun 2008 14:10:00 GMT

In answer to my own question in #14, yes! Just using position:absolute, width 80% to match the canvas width and margin: 0 auto on line2, with margin-top: 20em on line1 does the trick. So it seems the technique can be mixed and matched, making it very useful indeed :) Well done, Eric!

Divitis?

Tue, 17 Jun 2008 14:38:38 GMT

In #13 Blaise mentioned 'divitis'. I was fully aware of the need for a lot of structure in the markup. That's why I mentioned this might not be your method of choice, especially not for simple layouts. However, there is no sound alternative (yet...), no matter how much CSS you throw at it. And, on the upside, the markup is pretty straightforward.

Drupal theme

Tue, 17 Jun 2008 14:40:15 GMT

Jason, I've made an example in Drupal. It's not a theme ready for a contribution yet. If I can find some time :-( I will contribute this.

GJ, Eric

Tue, 17 Jun 2008 15:27:17 GMT

Interesting read, Eric. Thanks. I've not tested this yet, but here's my thumbs up to you (pl.) just for having had that idea. I don't think this will be viable for my work though, as like #13 said, minimum markup is king. ;)

wow, thanks guys!

Tue, 17 Jun 2008 15:30:29 GMT

I'd started a redesign of my companies website last week, and had been working with a design where I had two horizontal bars on top, a vertical left hand bar and then a grid of 4 blocks in the main content area, and was running into all of the troubles mentioned. So I get into work today and see this article posted in my RSS feed and was blown away. Needless to say, I adapted this idea to my project and in less than 2 hours, it has taken care of all the problems which I'd been having getting the layout to work. As you say Eric, this method is made for designs which are already div heavy, but it's very flexible. Yeah, you have 3 divs for a header, but if you want to toss a search box, or other content up next to the header, then it's very easily adaptable to handle that situation. Thanks for you guys' work, and impeccable timing!

thank you!

Tue, 17 Jun 2008 16:09:41 GMT

I'm always experimenting with various layout techniques but this one is pure gold. With this I can achieve fluid or em widths with a max-width (what I prefer) with ease. I also work with Drupal and might have to do something with this. :) Sprinkle in a bit of the theme settings api for user end control.

Turn this into a framework?

Tue, 17 Jun 2008 16:38:40 GMT

Oh, and this could be the missing technique that frees BluePrint from pixel width layouts. I'll have to experiment and combine the ideas. Thanks again. I've been looking for a solution like this for a looong time.

No hacks required?

Tue, 17 Jun 2008 17:38:03 GMT

Negative margin used this way is a hack in itself, although not a browser specific. Positioning is not what the margin is supposed to do. This is something I will store in my arsenal for specific situations, but it is definitely not a best practice when it comes to layouts. Anyway, It is a good way to get around a whole lot of IE6 bugs.

Can you embed "line" within "item"?

Tue, 17 Jun 2008 18:26:13 GMT

I want to have a navigation column on the left that spans the lines of content in the middle and right columns. How can I achieve this using your technique? Since "canvas" is an id I guess there can only be one per page. Can I embed "line" divs within "sap-content" divs? Thanks for sharing your invention.

Yes, you can embed "line" in "item"

Tue, 17 Jun 2008 18:55:47 GMT

That's what Eric meant when he said it was possible to nest faux absolute positioning recursively. The "canvas" id is not special, you can use any other name you want or even use a class you apply to items that should act as a canvas.

re: can you embed...

Tue, 17 Jun 2008 19:27:55 GMT

Yeah, you can. The site I'm working on is now using this layout: canvas line: (item, item) line: (item) line: {item, item: [line: (item, item)], [line: (item, item)]} line: (item)

Do we need another layout technique?

Tue, 17 Jun 2008 19:52:00 GMT

1. I think that absolute positioning is seldom used amongst serious developers, floats are the norm 2. The author's critique of float layouts is narrow and dead wrong 3. I've been coding PSDs, including some exotic ones, and I've never had a problem I couldn't solve with normal techniques. But the hacker in me loves that someone has come up with a solution to the problem of having absolute positioning that affects layout. I don't know how many designs will benefit from the technique though. One nice thing is that it pushes the pixel-perfect absolute-positioning OCD people (never encountered one, or their code, but you know they're out there!) towards normal layouts.

I used the technique and it worked

Tue, 17 Jun 2008 20:17:13 GMT

I am the new web designer for my city's newspaper (not one of the major cities, but enough to need an in house web designer); only 4 weeks on the job. I needed to make an IE 6 fix for a page. Instead, I noticed the page had the basic elements that could utilize this technique. So I rearranged the code and applied this method. It worked perfectly. It even made the CSS in the original cleaner and simpler.

ff 2.0.014 - small screen, no horizontal scrollbar

Tue, 17 Jun 2008 22:21:50 GMT

i played with the 2. example and below "min-width" the content is not accessible, because the horizontal scollbar is not visible

Not Divitis

Tue, 17 Jun 2008 22:46:06 GMT

For those complaining that this is a case of Divitis, I don't think it is. Divitis is a result of using DIVs for elements that could use a more appropriate tag, such has H1, UL, etc... I've worked with templates that used DIVs for headings and other templates that used lots of nested DIVs with H tags for headings. The latter is perfectly fine and doesn't interfere with your CSS work. The article explains why each DIV is necessary for this technique to work, there's nothing semantically incorrect here and no harm is done. It's similar to many of the techniques that allow for rounded corners, it's something you have to do for a particular method to work.

Does anyone notice the layout of this article is jacked or is it just me?

Tue, 17 Jun 2008 23:30:39 GMT

I'm on xp in IE 7 and about halfway down the page column gets and stays narrow - about 2/3 of the width its supposed to be. If you hover a link in a paragraph with your cursor then IE will redraw the paragraph to it's correct width.

No horizontal scrollbar

Wed, 18 Jun 2008 00:25:28 GMT

@Michael Lange (and author of course) I tried huge negative margins while searching for what I could call 'float:center'. You have three elements, all floating and you want them to be centered in the screen. Also on small screens you want the floats to wrap. Since float only knows left and right you have no way of doing this without a fixed content width. I made it fixed now, and the wrapping element for small screens is lost. When experimenting with a big negative margin, which I though back then might solve the trick (wild guess) I noticed my horizontal scrollbar disappeared, and that made me stear away from any negative margin that extends beyond the canvas. If it's solvable I may use it again, otherwise, I stick to hacks, and the incidental float drop (usually caused by someone inserting a big unbreakable link).

Layout fails in both IE7 and IE6

Wed, 18 Jun 2008 00:33:58 GMT

Yes, Ward, it happens in both IE7 & IE6 -- I didn't notice at first because I'm usually browsing with Firefox. Eric, what do you intend "sap" to stand for, in e.g. "sap-content"? My brain keeps coming up with things like "somewhat absolute positioning" or "stand alone positioning" or "single apple positron", and they don't seem quite right ...

Great info, but too bad it comes to this

Wed, 18 Jun 2008 01:01:22 GMT

The article was great, and I applaud all the work you put into it - I'm happy to seen an alternative to the "other two" options. But the fact that you to had to go through this trouble to get a decent layout is sad. It really highlights how inadequate CSS is. No, I don't want to use tables. I want to see both the CSS standard and browser support improved!

sap or fap?

Wed, 18 Jun 2008 01:23:45 GMT

Apologies at ME Curtin: the div with 'sap-content' should be called 'fap-content'. In earlier versions of this article I used the term 'simulated' instead of 'faux'. Still more scrutiny is needed...

Layout of article?

Wed, 18 Jun 2008 01:31:16 GMT

It took me a few minutes to understand Ward was taking about the layout of the article, not the examples. Maybe ALA needs faux absolute positioning too ;-) Seriously, I think the conversion from textile to html introduced a bogus
after the tags. ALA staff: help is needed here...

Horizontal scroll or not?

Wed, 18 Jun 2008 01:43:43 GMT

Michel and Michael are right in concluding this technique will not in itself render a horizontal scrollbar, even if the screen is very small. I think it's your choice as a designer or developer to let that happen or not. I've tested with the 'small screen' option in Opera9 and both examples are perfectly usable.

Having some problems..

Wed, 18 Jun 2008 04:29:56 GMT

I'm having some issues with this. I have 3 columns, but rather than the content float to the right of each other, they are appearing on separate rows.

Goodbye to unneccessary coding.

Wed, 18 Jun 2008 04:32:09 GMT

It's been a while since a piece of coding has me this excited. I had previously been using the float technique and fiddling with margins to get everything to sit right. I'm a big fan of grid layouts so this technique is perfect for a lot of my projects and will save me endless amount of hours...

Distribute columns

Wed, 18 Jun 2008 09:32:22 GMT

Great article and technique, I will like to find a simple alternative for the example 2. I'm looking for a distributed columns version, "like this":http://octavez.com/alistapart/css_distribute_columns.gif .

Distribute columns #2

Wed, 18 Jun 2008 09:47:33 GMT

I think the better solution to distribute columns is to use a padding-left on all columns and remove on the first, like that: .column {padding-left:20px} .column:first-child {padding-left:0;) I prefer to use :first-child rather than :last-child because it's more compatible.

Another Handy Technique

Wed, 18 Jun 2008 11:58:44 GMT

Great article. This is a great technique and I will definitely be using it in future. I'm not sure it's completely new though. Haven't negative margins and relative positioning been "used before":http://www.bluerobot.com/web/css/center2.html ? 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.

Colour me impressed

Wed, 18 Jun 2008 12:23:44 GMT

I've done a lot of playing around with this and found it surprisingly reliable and easy to implement into an existing site. I love the fact that the order of the items in a line has no significance, so you can put the content in front of the sidebars without repercussions. The CSS is minimal and easy to remember, although it doesn't make any sense to me, but that's not the point. :) I'm going to try implementing this into our own Drupal theme. Thanks Eric and Co.

Solving today's Problem today

Wed, 18 Jun 2008 12:54:31 GMT

I just wanted to drop some kudos for this technique. It happens to apply to exactly what I was struggling with this morning. Thanks!

Ran into a little problem

Wed, 18 Jun 2008 14:24:00 GMT

Running FX 2.0 on Windows Vista, and i ran into a content problem. On window resize, the content keeps it's place, does not move along with it's container. A refresh solves the problem. IE6, IE7, IE8, Opera 9.5 And Safari for Win work just fine as i tested. It is a nice solution, but sounds kind of "hacky" to me. Usually i use the float technique, which seems to be a little more stable than this one. Never got in any trouble. I'll definetly study this one and maybe use it if the need appears, but i won't replace my old technique until i am familiar with all the drawbacks of this one. Thanks a lot for the beautiful article.

Re: Ran into a little problem

Wed, 18 Jun 2008 14:28:57 GMT

To describe even better the problem: 3 columns, left:30%, right: 20%. Content stays in place on window resize. Now, this only affects this type of layout. If instead i have px defined widths for the left and right, all works just fine.

re: LAYOUT FAILS IN BOTH IE7 AND IE6

Wed, 18 Jun 2008 14:29:45 GMT

Thanks for letting us know. All fixed now. Funny story. A carriage return in the code examples caused IE6 and IE7 to furiously self-mutilate. There was nothing wrong with the carriage return, of course. But IE6 and IE7 have, shall we say, a bizarre relationship with whitespace in HTML.

so far

Wed, 18 Jun 2008 15:07:54 GMT

Thanks for all the positive feedback so far. It's great to know this really is helping people. @Christain: I'm not able to assist with implementation issues right now, hope to spare some time later this week - have to earn some money sometime... I would rather say the standards are 'underspecified'; the technique is not 'hacky' since it complies.

Outlook 2007

Wed, 18 Jun 2008 17:51:25 GMT

This looks really neat. I'm excited to see how well it will work in Outlook '07. For more information, see "this article":http://www.campaignmonitor.com/blog/archives/2007/01/microsoft_takes_email_design_b.html

Untitled

Wed, 18 Jun 2008 18:33:44 GMT

Example 1 is not loading for me currently.

fapdemo working again

Wed, 18 Jun 2008 19:01:47 GMT

Dave, I restarted lighttpd. All seems OK now.

Re: Ran into a little problem

Wed, 18 Jun 2008 19:32:42 GMT

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.

Not knowing the size of ems in pixels

Thu, 19 Jun 2008 07:47:15 GMT

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.

NICE

Thu, 19 Jun 2008 08:20:36 GMT

It's a nice article. thank's to you and your team.

Untitled

Thu, 19 Jun 2008 08:25:41 GMT

it is okay if i changed, margin-left: -100%, become margin-left: -800px ? (assumed that my .line width : 800px) Thanks

Untitled

Thu, 19 Jun 2008 10:44:27 GMT

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.

Overflow:hidden trick would work for floats too

Thu, 19 Jun 2008 11:50:09 GMT

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?

Adding min-width to content div...

Thu, 19 Jun 2008 13:26:31 GMT

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...

Does not seem to work in IE6

Thu, 19 Jun 2008 16:25:23 GMT

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...

re: doesn not seem to work in ie6?

Thu, 19 Jun 2008 18:07:01 GMT

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'.

Simplifies my life. Thanks!

Thu, 19 Jun 2008 19:05:14 GMT

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!

line/item vs. tr/td

Thu, 19 Jun 2008 19:06:47 GMT

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?

Broken in Outlook '07 (No Surprise)

Thu, 19 Jun 2008 19:11:58 GMT

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 ):

tables versus faux

Thu, 19 Jun 2008 21:25:42 GMT

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....

Why "Faux"?

Fri, 20 Jun 2008 01:39:24 GMT

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.

RE: Broken in Outlook '07 (No Surprise)

Fri, 20 Jun 2008 16:36:22 GMT

Er... it's broken in *outlook*? When did it become a good idea to put CSS positioning (let alone other CSS) into HTML email?

"Faux" because

Fri, 20 Jun 2008 17:26:56 GMT

@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.

Better than Blueprint

Fri, 20 Jun 2008 20:54:59 GMT

I think I am going to ditch Blueprint for this method. It looks more simple and semantic. Great job!

demos don't works

Sat, 21 Jun 2008 14:07:14 GMT

Drupal can't to connect to database, looks like something broken.

why 'display: block;' ?

Sat, 21 Jun 2008 17:03:17 GMT

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

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.

Is display:block necessary?

Sat, 21 Jun 2008 18:47:34 GMT

Is display: block necessary on

since that is already a block-level element? Thanks!

display: block not necessary

Sat, 21 Jun 2008 21:26:09 GMT

You folks are right: the display block is not necessary at all, it is a leftover from earlier experiments. Sorry for the confusion.

Works Great so far

Mon, 23 Jun 2008 14:41:16 GMT

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.

Works good with fixed pixel column widths as well

Mon, 23 Jun 2008 16:41:06 GMT

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.

Re: Not knowing the size of ems in pixels

Mon, 23 Jun 2008 17:53:53 GMT

@"Peter Labrow":"http://alistapart.com/comments/fauxabsolutepositioning?page=6#53" : bq. 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).

Come back to the table

Tue, 24 Jun 2008 14:10:52 GMT

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 )

Tables?

Wed, 25 Jun 2008 06:47:05 GMT

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. :)

Nice one!

Wed, 25 Jun 2008 07:47:31 GMT

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.

Love Grids, But...

Wed, 25 Jun 2008 21:25:06 GMT

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...

great article... but I do disagree with this:

Thu, 26 Jun 2008 13:56:03 GMT

"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.

Untitled

Fri, 27 Jun 2008 08:46:37 GMT

@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 :)

Similar positioning method

Fri, 27 Jun 2008 10:50:59 GMT

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

Wonderful method

Fri, 27 Jun 2008 16:05:08 GMT

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.

An Argument Against This Technique

Sat, 28 Jun 2008 18:15:52 GMT

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/

a cell that spans two columns but . . ...

Sat, 28 Jun 2008 23:41:26 GMT

How about a cell that spans several rows?

Great!

Mon, 30 Jun 2008 09:57:10 GMT

I've been looking for information about this for some time... Thanks :D

I Love It

Wed, 02 Jul 2008 15:15:37 GMT

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.

Cell spanning rows

Wed, 02 Jul 2008 18:27:35 GMT

@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.

looking forward to some tests

Thu, 03 Jul 2008 18:08:15 GMT

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.

Mobile testing ?

Fri, 04 Jul 2008 16:18:34 GMT

Has anyone tried this to see how it behaves on various Mobile Devices? Would be interesting...

Jumping Left Column

Mon, 07 Jul 2008 14:26:49 GMT

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??

I used it in ie 6

Mon, 07 Jul 2008 19:20:28 GMT

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

Looks promising

Tue, 08 Jul 2008 15:50:23 GMT

Have to try it out next time I'm doing a layout from scratch.

A bit presentational - but I like

Fri, 11 Jul 2008 21:16:18 GMT

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.

Table Simularity

Fri, 11 Jul 2008 21:19:24 GMT

Absolutely

Wed, 16 Jul 2008 20:35:52 GMT

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.

I Give Up - I'm going back to tables

Thu, 24 Jul 2008 03:44:31 GMT

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:-]

Compatibility with Dereamweaver?

Mon, 28 Jul 2008 18:47:48 GMT

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.

A little tidying...

Tue, 29 Jul 2008 16:25:45 GMT

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

list1

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!

RE: #97 - Robert Shaver

Tue, 29 Jul 2008 18:13:49 GMT

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.

re: 97 Robert Shaver

Tue, 29 Jul 2008 18:14:24 GMT

Nice article

Fri, 01 Aug 2008 14:25:48 GMT

Pretty big help in positioning techniques. This guy knows his stuff! Keep it up!

I liked it, but...

Thu, 07 Aug 2008 20:06:35 GMT

There is a bug at IE6... when you place a background image in the middle rightest column, the column disappear.

problem with table of contents

Mon, 18 Aug 2008 13:22:06 GMT

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?

IE6 bug exists

Wed, 20 Aug 2008 01:41:24 GMT

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.

position: overflow?

Sun, 24 Aug 2008 21:47:14 GMT

Nice article and interesting technique! Just one minor typo: bq. [I]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! :)

Positioning Tips

Mon, 01 Sep 2008 06:54:07 GMT

Thanks Buddy! this would definitely help us to fix the positioning problems.

scale

Wed, 03 Sep 2008 17:33:35 GMT

from the examples: scales poorly past a certain point. or was this just in the examples?

Great Stuff

Thu, 18 Sep 2008 12:38:34 GMT

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

Sorry for Time wasting

Thu, 18 Sep 2008 13:10:00 GMT

Ignore above having bad day and using wrong folder for style sheet access. doh!

A++

Thu, 25 Sep 2008 03:03:30 GMT

This is awesome! I just starting fooling around with it and I can already see how efficient this is. Thanks for the article!!! J

It really seems all to complicated.

Tue, 30 Sep 2008 11:42:53 GMT

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!

There is a problem

Wed, 05 Nov 2008 04:13:17 GMT

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?

Works Great!!!

Thu, 25 Dec 2008 17:21:36 GMT

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!