'CSS equal height divs with borders

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?

htmlcss


Solution 1:[1]

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.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 HEX

Related Questions