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.
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.
Never Give Up |
The only reason I stuck with this for so long (a couple weeks of spare time tinkering) was that I knew it was possible, and refused to give up. I really dislike letting computers have the last word. |