Holy Grail Layout

» December 8th, 2008 » 15 Comments

TESTED IE6 IE7 FF(PC/MAC) Safari Opera(PC/MAC)

So what do we have here?

There a number of ‘Holy Grail’ layouts out there:

The problem with them is that they are usually only for one purpose, or they have validation problems. Way back I was presented with a problem, I needed a multi-column layout for a CMS engine that could allow infinite design possibilities with only one template. I needed a true ‘Holy Grail’ layout. Hence the following was born.

Now I know the name is suggestive, I apologize, its more me trying to be sarcastic. However this is a pretty mean-lean-green little layout in its own right. Let’s see how we can have some fun with it.

The Guts

The layout starts out as a 3 column layout with optional navigation bars as such:

The Markup

<div id="wrapper">

	<div id="header"></div>
	
	<div id="navigation-container-upper"></div>

	<div id="masthead"></div>	
	
	<div id="navigation-container-lower"></div>

	<div id="main">

		<div id="content">

			<div id="left"></div>
			
			<div id="center"></div>

		</div>

		<div id="right"></div>

	</div>

	<div id="footer"></div>

</div>

The CSS

*, 
html, 
body {
	margin: 0; 
	padding: 0; 
}

/* NN6/7 min-width is needed for scrollability when wrapper is centered */
body {
	min-width: 770px;
}

/* Use wrapper for Left Faux Column */
#wrapper { 
	text-align: left;
	width: 770px;
	margin: 0 auto; 
}

#header, 
#navigation-container-lower, 
#navigation-container-upper, 
#masthead, 
#footer {
	clear: both; 
	width: 100%;
}

#navigation-container-lower, 
#navigation-container-upper, 
#masthead, 
#footer {
	padding: 1px 0;
}

/* Use main for Right Faux Column */
#main {
	float: left;
	width: 100%;
}

#main:after {
 	/* Clear floating elements for NN6/7 */
    content: "."; 
    display: block; 
	height: 0px;
    clear: both; 
    visibility: hidden;
}

#center {
	margin: 0 170px 0 170px;
}

#content {
  	float: left;
  	width: 100%; 
	margin: 0 -95% 0 0;
}

#left {
  	float: left;
  	width: 170px;
}

#right {
  	float: right;
  	width: 170px;
	margin: 0;
}

/* IE Fixes for Win/Mac */
* html div#content {
	margin: 0 -100% 0 0;
}

Now three things of note:

  1. The entire layout is wrapped in a div called ‘wrapper’.
  2. ‘left’ and ‘center’ are wrapped in a container called ‘content’ while ‘right’ is after the ‘content’ container.
  3. All of the #2 containers are wrapped in the ‘main’ container.

How to achieve other layouts

Ok, so we see on the demo page that we have some nice javascript links to change the layout. We have started with the core and added a basic theme. The following modifications show how we can make this layout anything we want, as the javascript shows off.

Fluid Layout

#wrapper {
	width: 100%; 
	margin: 0 auto 0 auto;
}

Fixed Layout

body {
	min-width: 770px;
}

#wrapper {
	width: 770px; 
	margin: 0 auto 0 auto;
}

Fixed Left Layout

body {
	min-width: 770px;
}
	
#wrapper {
	width: 770px; 
	margin: 0 0 0 0;
}

One Column Layout

#right, #left {
	display: none;
}

#center {
	margin: 0 0 0 0;
}

Two Column Layout

#right {
	display: none;
}

#center {
	margin: 0 0 0 175px;
}

Three Column Layout

#right, #left {
	width: 175px;
}

#center {
	margin: 0 175px 0 175px;
}	

NOTE When creating the columns here, the margin on the left and right of the ‘center’ column needs to be equal to or greater than the width set for the respective left and right columns.

For example

#right, #left {
	width: 200px;
}

#center {
	margin: 0 200px 0 200px;
}

NOTE When you change the page width, you should change the body min-width as well.

Get Source Files

Grab the demo and the css files below.

Thoughts?

So there it is, my version of a lean-mean-flexible layout that validates. Thus far it has proven to be pretty handy, however there is always room for improvement, thoughts?

Be Sociable, Share!

Share

Comments

15 Responses to “Holy Grail Layout”

  1. Kevin,
    Jeff Barr here. We met tonight at the CSS Meetup. I want to thank you for your presentation tonight. I’ve been struggling with some of the CSS layout’s I’ve found. I really appreciate what I learned about your Holy Grail layout and look forward to trying it out.

    I would greatly appreciate your sending me the code you have for Dreamweaver as well as soon as you can and look forward to receiving it.

    Thanks again,

    Jeff

  2. Jeff on December 11th, 2008 at 12:01 am
  3. Kevin,

    Just discovered your materials this evening (from stickmanlabs to this place), and I’ve gotta say that you’ve got your act together. I’m quite the web newbie myself and I’m excited to implement some of your stuff. I’ll definitely be back for frequent visits!

  4. Wayne on December 12th, 2008 at 11:51 pm
  5. Hi,

    I stumbled on your site in a round about way while I was learning about content management systems. I’ve been a traditional develop from web sites from scratch kind of guy so things like Joomla, Reflect and Silverstripe are new for me. I do see the benefit of these in terms of being parameter driven for editing content.

    Nice work … on the “Holy Grail”

    I don’t know why they call it that. Once you “get” CSS it’s pretty easy to accomplish that and more. I’ve done the 3 col method about 5 different ways and I have also messed with more than three columns. I stopped using tables and inline formatting for HTML back in 2003. CSS … Rules … Rocks … well you know what I mean.

    I’ll have to tinker with your implementation just to see if it improves on the “Holy Grail Stuff” I worked out several years ago. http://www.wiz-bang.com/wiz-bang.php this is just one example of three col stuff I’ve played with.
    Keep up the Great work!

  6. rj on December 28th, 2008 at 11:05 pm
  7. nice stuff as usual, Kevin! Happy New Year to you and your family…

  8. Casey on December 31st, 2008 at 12:25 pm
  9. tnxs for sharing this stuff i really admire the simple yet a must have style script

  10. pau on January 14th, 2009 at 6:09 am
  11. great stuff! I think the only improvement to this great layout could be putting the center content before the left content in the code, for SEO improvement and (some say) accessibility reasons.

  12. Toddy on January 29th, 2009 at 3:10 am
  13. Hi there, I discovered your accordian about 4 days ago and having problems getting just a basic version to work. My problem is I am getting a accordian not defined error in FF (latest). So all I see to get is the divs showing but nothing else.

    I am wondering if it is because I am using accordian v2.

    Can you provide some assistance I would appreciate or feel free to drop me a contact number, or skype and I will call you direct.

    Anthon

  14. anthon lemarco on February 7th, 2009 at 1:10 pm
  15. nice, 3 column layout, been wanting something similiar, but wondered what would have to be done to make it animated? so when you clicked on each column you saw it accordion per se’?

  16. G on February 27th, 2009 at 9:01 pm
  17. We’ve played with the same stuff in those days :-P
    I’ve did the first draft of the BlankTheme project with this kind of functionality at Dec/08. But the difference, is that I’m using a CSS Framework (YAML) for x-browser compatibility, flexibility and some features, plus a Web Framework (Zikula), to handle content dynamically, use different configurations for different sections and put more additional zones if needed.

    Nice stuff, keep it up

  18. Matheo on November 18th, 2009 at 4:40 am
  19. Nice work, unfortunately on IE8 the layout width is narrower than in Firefox. Not sure why (zoom 100%, text size medium).

  20. marco on November 21st, 2009 at 1:06 pm
  21. I’d see all kinds of ads about blogging on the Internet to earn money, but don’t know of anybody that has actually made any money this way. I’d love to hear from anybody who has..

  22. best online game on November 14th, 2011 at 5:10 am
  23. You just copied someone else’s story

  24. proxy list on January 4th, 2012 at 12:22 pm
  25. We sure have come along way since the 1970s and how we dispose of things, now they just take a crane and take it and bury it in the nearest land fill.

  26. Merle Patti on July 28th, 2012 at 11:44 pm
  27. I blog frequently and I truly appreciate your content. Your
    article has truly peaked my interest. I’m going to take a note of your site and keep checking for new information about once a week. I subscribed to your RSS feed too.

  28. rome ii total war keygen on July 24th, 2013 at 7:01 pm
  29. This excellent website really has all of the info I
    wanted concerning this subject and didn’t know who to ask.

  30. delta vacations on September 18th, 2014 at 1:00 pm

Trackbacks/Pingbacks

  1. El Layout perfecto de 1, 2 o 3 columnas – Holy Grail | KimSo - Creación Multimedia

Leave a Reply