Something that I've been trying to do for a long time is a 3 column layout
where all three columns have equal height, and have rounded corners
implemented using PNGs with alpha.
One of my early attempts is here:
http://www.nrkn.com/3ColRoundAlpha/
It shows a bunch of different methods that I tried. You'll see that not
only is there a hell of a lot of nesting of divs, but the page is very slow
to load because there are a lot of image elements making up the various
pieces of the rounded corner box. Also, because I rely on display:
table-cell for the equal height, it doesn't work in IE. The only
cross-browser solution I've found so far is just to use a table. Of course,
I'd rather do it with html/css if possible.
Here is my new attempt, using absolute positioning and z-index to achieve
equal height columns. It has some problems which I'll go into a little
later:
http://www.nrkn.com/3ColEqual/
In my new attempt, there is a lot less nesting of divs (still not ideal but
I think I am getting close to the minimum number required for the desired
effect), also I have combined the images so that there are 5 images that
make up the boxes rather than 9, this makes quite a difference in page load
times (the images themselves are fairly tiny, it's the multiple http
requests that slow things down).
I've only tested in IE 6 & 7, Opera 9 and FF 2.
It works in all of them except IE 6. However, in IE 7 there is a horizontal
scrollbar. Anyone know what's causing this?
In IE 6... egads. First, I haven't implemnented the alpha hack, but forget
that for now. The backgrounds don't show up at all for the absolutely
positioned divs, any idea why?
Also, in IE 6 the tops of the columns have gaps in them, whereas in the
other browsers they fit together snugly, any ideas?
