I hate to say this, but I think this is what I was looking for. Everyone shows the 3 columns and they seems a little different and as a newbie sometimes I don't know why.

Not all sites want to nit pick and add lots of borders and colors, etc. Sometimes you just want to put some information in tabular form and I am having a hell of a time getting my two right columns where they belong, no problem with the two left ones for some reason.

I pray this is my solution because it's driving me buggy. Sometimes it's best to keep it simple and only make it complex if absolutely necessary.

Want no hassle? Use Faux Absolute Positioning: http://alistapart.com/articles/fauxabsolutepositioning/

I've never seen a more stable layout technique in my life, it cannot break in any browser from IE6 up. It has a couple of quirks to watch out for, but they're easily avoidable and hardly an issue.

We use to use a float-left-and-clear layout in our base theme, but since we always had 3-4 different people skinning sites the layout would almost always fall apart in testing. It was too fragile. Ever since I introduced FAP to the base theme we haven't once had a sidebar fall out of place.

I think this blog post needs some nuances. You make it sound as if everything beyond floated columns is unnecessary bloat and that somehow everyone has been barking up the wrong tree with advanced CSS techniques/hacks.

"The byzantine two column layout wrapped within a two column layout technique"
"The absolutely positioned nightmare"
Both of these techniques are used to achieve layout-independent ordering of the HTML (e.g. main content before sidebars). Depending on the content and audience, this can be important.

"The arcane negative margin trick"
This is normally used to combined fixed-width sidebars with a fluid center column, whereas your structure only does fully fixed or fully (proportionally) fluid.

You also conveniently gloss over the fact that in your technique, due to browser rounding differences, you often need to set the width of the final column to a fraction less of what it should be, resulting in an unsightly gap to the right in many cases.

Not to mention, layouts are always easier in mockups like yours, because you're not actually styling them. For example, in the case of Garland, the page's structural CSS had to be redone from scratch because the simplest, cleanest approach would not render the main background images correctly in both IE6 and IE7 – even though the content inside was fine. If you examine Garland closely, you can see that the two sidebars (left and right) use a different way of sitting next to the main content for this reason.

To answer the issue of equal height columns, as far as I know there is only one technique that somewhat works with floated columns: the trick is to give each column a huge bottom padding and an equal but opposite negative bottom margin. Then, set the layout container to "overflow: hidden" to trim off the bits that stick out. Unfortunately, this technique has several issues that make it impractical in generic page layouts in CMSes.

In conclusion, I wouldn't say the floated-columns approach is the one technique to rule them all, no. A better avenue to explore is CSS2 table display modes with alternate IE6/7 CSS: this is future-proof and ensures the hacks can be phased out eventually. At the end of the day, floats were never meant as column containers in the first place, and their use as such is an abuse of CSS.