3 column, equal height, round corners, alpha png

Discussion in 'HTML' started by Nik Coughlin, May 15, 2007.

  1. Nik Coughlin

    Nik Coughlin Guest

    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:

    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


    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?
    Nik Coughlin, May 15, 2007
    1. Advertisements

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Lee Moore
    Lee Moore
    Feb 6, 2004
  2. rf

    Round corners with CSS

    rf, Sep 14, 2003, in forum: HTML
    e n | c k m a
    Sep 14, 2003
  3. Jim Higson
    Jim Higson
    Sep 12, 2004
  4. Nik Coughin
    Nik Coughlin
    Nov 30, 2004
  5. Replies:
    Nik Coughlin
    Mar 11, 2007

Share This Page