Question

I tried this with DIVs. The problem occurs in both. I can’t get the right border to be equal heights as the longest DIV. And I need this to work across the current desktop browsers from the days of IE7 and up.

This is a common problem, but it’s 2011 now when I write this. Is there finally a way to do this with pure cross-platform CSS without resorting to funky tricks like pretending to make it work (such as a column cutoff)? Or, must I resort to jQuery to make it work in the least amount of fuss?

EDIT: My bad. When I wrote this originally, I included TABLE TDs having the problem as well as DIVs. But I didn’t realize that I had taken my test code and switched from DIV to TD, but my CSS still said float:left;clear:right. When I eliminated that with the TDs, the border extended to full height of the longest column. However, still, it would be good to find out how to do this with DIVs, but cross-platform from desktop browsers starting with the year IE7 came out and upwards.

Answer 1

This approach is relatively “trickless” — and it’s the only approach I’ve found that works correctly, and doesn’t involve any big-time hacks. (also, no tables – only divs and css).

You can see the following example in action: here (jsFiddle)

HTML:

<div class="colwrap">
    <div class="col1 content">
        <div class="col1 bg"></div>
        unde omnis iste natus error 
        sit voluptatem accusantium 
        doloremque laudantium
    </div>
    <div class="col2 content">
        <div class="col2 bg"></div>
        abcdefg hijklmnop
    </div>
</div>

CSS:

.colwrap {
    position: relative;
    overflow: hidden;
}
.colwrap .content {
    float:left;
    overflow: hidden;
}
.colwrap .bg {
    position: absolute;
    height: 100%;
    z-index: -1;
}
.colwrap .col1 { width: 50px; }
.colwrap .col1.bg { background: blue; }

.colwrap .col2 { width: 50px; }
.colwrap .col2.bg { background: red; }

Notes

1. The only trick here, is that you have to split your background (or border) — whatever visual element you want to fill the column with–into a separate div from the content.

2. Your columns must be fixed-width. percentage widths usually won’t work out very well.

3. The content divs float within the wrapper, which is set to overflow:hidden. This way the content divs “push out” the wrapper to the full height of the largest content.

4. Then the background divs are position:absolute; height:100%;. They automatically inherit the position (top,left) of their floating parents, but the height is computed based on the next positioned parent (not the floating content div, but the wrapper, with position:relative;). So the background divs end up right where we want.

5. The bg divs also use z-index:-1; to force them behind the content. This works in webkit, and FF, but may not work correctly in IE (esp. older versions). If it doesn’t work, the problem is likely the negative number. To fix it all you have to do, is add an additional wrapper around the text within the content div, then set z-index on bg and on your content wrapper, so that things stack the way you want. (of course, you should test it — because it may not be a problem at all).

6. Finally, I’ll note that this same approach will work for as many columns as you want — just add more (.col3, .col4, and so on.), just like col1 and col2 shown above.