CSS equal height divs with borders

Issue

Currently I'm using the negative margin technique (e.g. CSS - Equal Height Columns?) to make my horizontal divs appear to have identical heights. This worked great for a while, but now I have to add borders to the divs but there is no bottom border due to the combination of the padding and negative margin to stretch the background.

Here's a fiddle I've set up with my code: http://jsfiddle.net/BvVKH/3/

HTML:

<div class="justified-divs">
    <div>
        <p>column</p>
    </div>
    <div>
        <p>column</p>
        <p>column</p>
    </div>
    <div>
        <p>column</p>
        <p>column</p>
        <p>column</p>
    </div>
</div>

Relevant CSS:

.justified-divs {
    overflow: hidden; /* cut off the stretched background */
}

.justified-divs div {
    padding: 0 10px 9999px 10px; 
    margin-bottom: -9999px;
    *margin-bottom: -9999px;
}

I've looked at many different solutions and the reason I originally went with this one is because of it's old IE support. Are there any more pure CSS options that will accomplish the equal heights with borders in all browsers?

Solution

I was able to successfully get the result you were looking for. The solution is one that I first saw outlined here: http://offshootinc.com/blog/2011/11/23/getting-100-column-height-with-css/. The only issue is that you would need to know which column is the one with the most content to make it work. If that changes frequently (ie: dynamic content) you may need to resort to a Javascript solution. I've posted the code below but you can also check out the jsFiddle here: http://jsfiddle.net/mesPb/

<!-- HTML -->
<div class="justified-divs">
    <div class="one">
       <p>column</p>
    </div>
    <div class="two">
        <p>column</p>
        <p>column</p>
    </div>
    <div class="longest">
        <p>column</p>
        <p>column</p>
        <p>column</p>
    </div>
</div>

/* CSS, BABY */
div.justified-divs{
    background: #090;
    position: relative;
}

div.justified-divs div{
    width: 30%;
    background: #fff;
    top:0;
    bottom:0;
    border: 1px solid red;
}

.one{
   left:0;
   position: absolute;
}

.longest{
    margin-left: 70%;    
}

.two{
    position: absolute;
    left: 35%;     
}

Hope this helps.

Answered By - 80PoundsOfFury