CSS equal height divs with borders

Question

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?

Are old IE browsers actually a concern? IE6 and IE7 are pretty much dead. http://ie6countdown.com — cimmanon, Oct 08 '13 at 16:30

score 1 · Accepted Answer · answered Oct 08 '13 at 17:20

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.

score 0 · Answer 2 · answered Oct 10 '14 at 11:36

How about adding pseudo-element inside every column?

.justified-divs div:after {
      content: '';
      display: block;
      width: 30%;
      height: 0;
      border-bottom: 2px solid red;
      position: absolute;
      bottom: 0;
      padding: 0 10px;
      margin-left: -10px;
}

.justified-divs {
  font-size: 0;
  text-align: justify;
  -ms-text-justify: distribute-all-lines;
  text-justify: distribute-all-lines;
  overflow: hidden;
  /*temp debug colors */
  background-color: green;
  position: relative;
}
.justified-divs:after {
  /* stretch divs to give them equal horizontal spacing */
  content: '';
  width: 100%;
  display: inline-block;
}
.justified-divs div {
  background-color: white;
  font-size: 14px;
  vertical-align: top;
  display: inline-block;
  text-align: left;
  *display: inline;
  /* <= IE7 hacks */
  zoom: 1;
  /* <= IE7 hacks */
  /* use large padding and equal size negative margin to keep column heights the same size as whichever is tallest */
  padding: 0 10px 9999px 10px;
  margin-bottom: -9999px;
  *margin-bottom: -9999px;
  /*temp debug colors */
  width: 30%;
  border: 2px solid red;
}
.justified-divs div:after {
  content: '';
  display: block;
  width: 30%;
  height: 0;
  border-bottom: 2px solid red;
  position: absolute;
  bottom: 0;
  padding: 0 10px;
  margin-left: -10px;
}

<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>

I have added position: relative; inside .justified-divs and :after for every column.

CSS equal height divs with borders

2 Answers2