4 ms·

Browser support (not using Flexbox because of IE) is not that hard once you get your head around it: view-source:http://alistapart.com/d/holygrail/example_3.ht

Browser support (not using Flexbox because of IE) is not that hard once you get your head around it: view-source:http://alistapart.com/d/holygrail/example_3.html http://alistapart.com/d/holygrail/example_3.html http://alistapart.com/d/holygrail/example_3.html http://alistapart.com/d/holygrail/example_3.html

dmitrygr 9y ago
Falls apart entirely on phones (tiny columns of one word wide each, AND horizontal scrolling), so you only proved OP's point...
- Raphmedia 9y ago
  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.)
- notahacker 9y ago
  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.
  - Raphmedia 9y ago
    To be honest, nothing ever stopped anyone from using display:table;, display:table-row; and display:table-cell;
    - notahacker 9y ago
      This probably is the most robust solution now, but IE6 mattered then, and it didn't even work in the shiny new IE7

dmitrygr 9y ago

Falls apart entirely on phones (tiny columns of one word wide each, AND horizontal scrolling), so you only proved OP's point...

Raphmedia 9y ago
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.)
notahacker 9y ago
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.
- Raphmedia 9y ago
  To be honest, nothing ever stopped anyone from using display:table;, display:table-row; and display:table-cell;
  - notahacker 9y ago
    This probably is the most robust solution now, but IE6 mattered then, and it didn't even work in the shiny new IE7