I replied on your site but not sure if the post was accepted as it just seems to time out on me (it did that yesterday also). Therefore I have reproduced the post in part below.

Yes the Opera problem with percentages has always been like that ever since the year dot and I guess that it’s not something that’s likely to get fixed soon I documented it about 8 years ago in this ol and tired demo(http://www.pmob.co.uk/temp/hozinlinemenu.htm).

Regarding the link problem , perhaps I wasn’t that clear but the problem is not with clicking the links but with “in-page” links (i.e. links that are reached via a fragment identifier).

If you have a link in your page that goes further down the same page and inside one of those columns (e.g. …a href=”#info”… ) then you will find that the page scrolls to the link as requested but any content that was previously above the link is completely cut-off and unreachable and unusable.

This is the same problem as in the one true layout and the reason why its use can’t be trusted but all for the simplest of scenarios.

I’ve put a demo of your code here with the fragment identifiers added and you can see for yourself if you click the link in column 5.

In all browsers (except ie6 and 7) the destination is scrolled to but that effectively makes all the content above disappear and makes the page unusable.

BTW, I’m not trying to be negative as I think it’s great that you are trying these things out as that’s the way these things move forward .

Thanks for your link which is quite interesting especially the percentage based widths method. I should point out though that it fails in Opera because opera doesn’t honour fractions of a percentage so there are big gaps in opera although there’s little you can do about that.

The equal column method is roughly based on the same concept as the old article above with the absolute overlays except for using :after to create the absolute overlay instead of an extra html element.

While I think that it is a neat concept it leaves IE6 and 7 out in the cold unlike my method which just needs one empty extra html element for ie6 and 7 to work nicely.

The main drawback of your method is that it suffers from the same problem as “the one true layout” and you can’t have any in-page links or your content is cut off when the target is reached.

This is a showstopper for me and doesn’t happen in my example here which works back to ie5 with equal columns.

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

You could absolutely place an element at the bottom of another element and the text would run upwards.

e.g. (some very old demos)

http://www.pmob.co.uk/temp/text-at-bottom2.htm
http://www.pmob.co.uk/temp/text-at-bottom3.htm
http://www.pmob.co.uk/temp/text-to-bottom-of-image.htm

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.