In fairness, that was written in 2006 when people browsing the internet on their dumbphones generally got served entirely different web pages. And you could fix it with media queries. But the fact that it needed hacky stuff like arbitrarily large positive padding and negative margin values to achieve a "holy grail" of the standard way websites had been laid out using tables for the previous decade or so didn't reflect very well on CSS spec drafters or the browser vendors of the time.

To be honest, nothing ever stopped anyone from using display:table;, display:table-row; and display:table-cell;

This probably is the most robust solution now, but IE6 mattered then, and it didn't even work in the shiny new IE7

Well, of course. That's simply a three column layout example without any responsive media queries. It's the bare minimum to a three column "holy grail". If anything, you could simply add the viewport meta tag to have the user's phone zoom in automatically.

However, making this example responsive is a piece of cake:

@media only screen and (max-width: 1024px) {

    * {
    
        float: none !important;
        
        width: 100% !important;
        
        margin: 0 !important;
        
        padding: 0 !important;
        
        position: relative !important;
        
        right: auto !important;
        
        left: auto !important;
        
    }
    

}

(Terrible CSS simply to show how easy it is to make it responsive. Normally you wouldn't wildcard important everything but target the right classes. I can't be bothered, this gets the point across.)