title: CSS Holy Grail layout
body: <p>Can someone break down for me the pieces that compose the Holy Grail Layout with switched div positioning as seen here? <a href="http://matthewjamestaylor.com/blog/perfect-3-column.htm" rel="nofollow noreferrer">http://matthewjamestaylor.com/blog/perfect-3-column.htm</a></p>
  
  <p>The way I understand is that:</p>
  
  <ul>
  <li><p>colmask is just a wrapper to position the content between header and footer</p></li>
  <li><p>colmid is another wrapper that i guess accomodates some browsers such as IE7</p></li>
  <li><p>colleft is the wrapper of the real thing (not sure why so many wrappers)</p></li>
  <li><p>col1, col2 and col3 are the real thing and are all floating left and set their margins to adjust their appearance on the screen</p></li>
  </ul>
  
  <p>Can someone explain better what's the Zen of that design? I'm trying to apply it to a real world scenario and it's not really working.</p>