NOTE: After extensive public testing, it has been found that the hunt for the Holy Grail of Web Page Layouts Without Hacks is still on. The layout described below from A List Part fell apart in the latest version of Internet Explorer. It suffered a bit with a few other browsers, too. This is another good excuse to switch to Firefox. The best replacement layouts I’ve found continue to be from Positioniseverything, the leading experts on CSS, web page design, and overcoming browser bugs.
I think I might faint. In fact, just thinking about this, let alone writing about it, has had me in a swoon for several days, it is that exciting.
A List Apart has found the Holy Grail of web page layout. Without hacks. I’m going to swoon again!
Okay, I’m back. For years I battled with creating a simplistic and hack free web page layout. I’ve done a lot of research over the years in search of the perfect layout, eventually developing my own one-hack web page layout.
Every six to ten months, I’d hear about another hackless perfect web page layout and go worship at their feet, only to find a hack involved to make the web page structure work consistently across all browsers. My one-hack innovative layout continued to hold true, even when I switched to WordPress. It was easy to incorporate the WordPress PHP codes and structure into a new version of my website, which you can see in my post on Innovative and Simple Web Page Structure – Just Change the CSS.
Still, the dream of a hackless web page layout kept me hunting, lifting up rocks and peering underneath.
WARNING: SOAP BOX ALERT: Yes, I’m about to get on my famous ranting soap box raging at lazy and uninspired web page designers. I’m totally and completely disgusted with the wasted real estate found in most WordPress Themes and web pages today, even the one I’m currently using, though I adore it for other reasons.
In order to overcome many problems with hacks in web page design due to incompatible or insufficient browsers, many designers force a web page into the middle of the page, with empty space to the left and right of the graphic content. If you are using an older low resolution monitor, the forced layout is often forced right off the width of your monitor so you have to scroll horizontally to read the posts. If you are using one of the new wide screen monitors, the web page represents a very narrow width on your screen, with wasted space all around. Yuk, yuk, yuk. Why can’t designers use the whole screen with flexible, elastic columns? That’s what our main site uses. Let web pages stretch and flow with their designs and not be strangled into place.
</end rant>
This is the way of the web design world.
Until now.
A List Apart has always been at the forefront of innovative thinking when it comes to web page design, layout, and design elements. Many of the writers are the true brilliant brains behind web page standards and accessibility standards, not to mention the fact that many are also award winning web page designers and developers. But mostly, these are the people unafraid to get their hands dirty and who boldly go where few dare to glimpse.
A List Apart’s Holy Grail by Matthew Levine is a work of art. It’s so simple, and yet sophisticated. It is totally elastic, stretching with the browser’s window, unrestricted. It is amazing, and oh, oh, I’m going to swoon again.
Okay, I also need to be fair. There is one small hack in the Holy Grail layout. it isn’t until you begin to add padding to the columns that Internet Explorer chokes. Web page designers have known this about Internet Explorer for years. They have their own set of rules when it comes to margins and padding, but this hack isn’t a “serious hack” which also has to be undone for other browsers. Only IE sees the hack, and the rest of the browsers ignore it. Still, for the sake of truthfulness, there is still a tiny hack. Soon, oh, faithful and patient ones. Soon, a totally hackless design will be out. But for now, this is the miracle layout.
I’ve been thinking of a way to add ads to my main site without destroying the overall layout and design, and this might be the answer. Either way, I will be working on implementing his recommendations very soon.
And if you are a web page designer, bookmark that article, print it out, and frame it on the wall. This is a legendary moment when web page design broke the hack mold. The web is a better place for it, too. Thanks, Matthew Levine! You are a star.
Related Articles
- Boycott Ugly Table Designed Blogs and Websites
- Finding Your CSS Styles in WordPress
- CSS and Web Page Design List of Resources
- Robin’s Blog – Blogging Tips to Help You Learn about Web Page Design and Development
- Do-It-Yourself Search Engine Optimization
- WordPress Theme Designers – Slapping You Upside the Head
- Innovative and Simple Web Page Structure – Just Change the CSS
- Fixing Browser Bugs and Hacks
- A Good CSS Tips, Tutorials, and Tricks Resource
- CSS – Studying Your CSS Styles
- In Search of the Perfect Layout
- CSS Maintainability – Serious Style Sheets
- WordPress Tips and Tricks for Style Sheets
- The Secret of Successful Editing of WordPress Themes
- Choosing a WordPress Theme
- Attention WordPress Theme Designers Designing Themes for WordPress.com and WordPressMU
Site Search Tags: web, page, design, layout, structure, architecture, browser, hack, hacks, web+standards, browser+hacks, perfect+layout, holy+grail, wordpress, wordpress+themes, css
Copyright Lorelle VanFossen
Lorelle on WordPress 
7 Comments
I agree – a fantastic article. I’ve been feeling the irresistible pull of a redesign over the least few days, and this might just be the excuse I need! There are some very interesting css tricks in there too (I’ve never come across the negative margin trick, for example).
The negative margin “trick” is one of the techniques used in image replacement techniques where an image,usually featuring fancy fonts in a title, replaces text while still remaining usable for text readers and accessibility.
And isn’t this exciting to find an almost hackless layout! I’m going to be implementing it myself very soon on my main site.
Ah, the joy of blogging. I can rant about anything. 😉 And you should never assume.
As one of the many volunteers helping to push the limits of what WordPress can do, my work here is to push WordPress.com, and part of that includes promoting awareness of FULLY and properly designed themes which benefit everyone.
The eyes need white space… I like a lot more the design of this page than the design of your main page, I think the centered layout looks great and it´s very elegant an legible. My 2 cents.
I’m not sure how you can say that a CSS stylesheet that specifies a padding-bottom of 10010 pixels and a margin-bottom of -10000 pixels is ‘without hacks’, but okay.
I’ve actually tried to create a wordpress theme based on the holy grail CSS. It’s not stunning, but it’s simple and works so far:
http://www.isulong-seoph.net/2006/06/14/i-present-to-you-isulong-seoph-wordpress-theme-v1/
It looks like you succeeded. Your theme is simple and clean, which means that people can take it like that and use it, or if you permit them, take it even further with the sidebar accessories known as WordPress Widgets, and maybe even something like Canvas or the other user-redesign techniques coming out now.
I’ve created several WordPress Themes now using the holy grail CSS and I have to say that I love it. It takes some work to get used to it, but it works beautifully.
Remember, the layout is just the framing of a house. It’s how you decorate the house that makes all the difference in the world. I’ll be talking more about this very soon. Stay tuned.