The Holy Grail of CSS

My students have been prompting me to teach more CSS. Before I could venture down that road, I had to master it myself. But getting it to work outside of the tables environment sent me down a long quest for knowledge. A "search for the holy grail" as others have put it, see below. I prowled around several websites, read a couple books, and finally simply started pushing div's around. By stripping out everything I didn't understand, and building from the ground up in ie6, firefox and safari, I was able to stumble onto this design. It seems quite bulletproof so far.

Basic Structure

The basic structure is a header with two nested divs. The two nested divs float right and left, while the header has the expanding banner_tile.

Under the header is a container with the left_tile.jpg running down it's left side. I didn't tell the container how wide to be, it finds it's own width which turns out to be 100% of the browser window.

Nested first inside the container is the left div which I tell to be 205px, the width of the buttons exactly. I also position it relative, and float it left into the padding I provide for it in the next div, which is named center.

Nested next inside the container is a center div to which I give padding on two sides equal to what the "columns" need. I don't position the center div, or float it, it just sits there and works. Believe me, I tried to float it, but it wouldn't work.

Nested inside the center div is a right column div. I had to position it absolutely within its parent: center div. I aligned the right div to top (below the banner) and right: 0. To move it over just a little I used another nexted div called 'round' to which I gave left padding. In my search for the holy grail, I learned that you should never give padding to an element with a fixed width due to the way ie6 interprets the CSS box model. You can however give padding to a fixed width elements children or parents.

I did not write the text below, but it is one of the places where I picked up some ideas. His design did not work for me, but was very informative.

Other Voices

http://www.alistapart.com/articles/holygrail
I’m sorry. Really. I didn’t name it. I don’t mean to overstate its importance or trivialize the other and rather weightier Holy Grails.