I’ve just done a bit of testing on the equal column layout and a dynamic hide and show does trigger the bug Michael mentioned and as I have seen before with absolute elements.

However just changing a couple of little things around will get IE6 and 7 to work nicely. The main problem was the empty clearer div that gained layout before the absoloute columns html that triggered the redraw bug.

I used a different clearing mechanism and the code works fine now.

Here’s a live example.

http://www.pmob.co.uk/search-this/absolute-columns3-hide.htm

Assuming you have a reference to the outermost container in a variable named “outer” then a simple

outer.className = outer.className;

is sufficient – the className doesn’t actually have to change for this to work.

If this doesn’t seem to do the trick, you may need to move out (or even in) an element or two to apply this trigger, but a bit of experimentation should get you there.

I have encountered one case (not using the specific techniques Paul describes here) where this trigger fixed IE 6 but triggered an even worse bug in IE 7, but that was a pretty complex layout, and normally it does the trick.

I’d need to see an example of where this is happening but I don’t believe it has anything specifically to do with my technique but the fact that IE always forgets where some absolute elements are when you insert dynamic content.

The same issue happens in absolutely placed footers at the bottom of a document.

One solution was that after the content was inserted the screen needed to be refreshed to make everything click back into place. I vaguely remember years ago just jogging the screen size dynamically back and forth by a pixel to get the same effect.

What happens if you grab the corner of the browser after you have inserted your content does everything click back into position?

If you want to post a link then I’ll take a look and see if there is an easy fix.

Any thoughts on how to fix this?

I’d say this method is an alternative to faux columns, but doesn’t replace it.

- Mark.

Hopefully pmob will come back soon.

Being able to create equal-height columns within other content, rather than the usual three-column page, is a demonstration of its value.

FYI, the only problem I encountered was in IE 6 and IE 7 where a containing element needed to have “position: relative;” set to make things fall into place. This didn’t affect any other browser, so there was no need to use hacks or conditional comments.

If anybody else is having trouble with this technique within a moderately complex combination of structure and styling, try “position: relative;” on an appropriate containing element further out from the specific markup relating to this technique to see if it helps.

The content does not go at the bottom of the columns it is placed in the normal flow of the document in the floated columns as usual.

Its only the background colours that are placed at the bottom of the document and no content is placed in these as they are just color overlays as explained in the article.

The “faux Column” technique uses background images for its effect and can’t be used on three fluid columns like my method which uses no images at all.

If you were talking about “the one true layout” then my layout doesn’t suffer from the in-page links problem (which is a show stopper right from the start), it doesn’t need massive padding and margins), is easy to use and most importantly doesn’t need any hacks apart from the one hack for ie6 only.

Although its not shown in the article overflow can be used on the columns to hide the overflow for ie6 without causing the in page links that the “one true layout” exhibits.

All in all it was a thoroughly innovative and useful technique and as the article is almost 2 years old the techniques are now well tested and work well without hitch.

I suggest that you research the details a bit more thoroughly in future before making bland comments like above.

all you seemed to have done, is reversed the faux columns idea and reversed the direction of the expansion and use the browser window to constrain the expansion.

Now, unless I’ve missed something, I hope I didnt, this actually doesnt solve anything that can’t already been solved.

So what does this technique bring to the table over faux columns? except the removal of the overflow attribute?