Equal height divs using css

Question

I have 3 floating <div>s which are surrounded by a wrapper.

The problem I am having is that the 3 div's all have to be the same length, but as they are responsive, they can't be fixed height.

I searched on stackoverflow and found this post: Make floating divs the same height

I tried this but couldn't get it to work.

I created a fiddle, where the middle column has the most text, so the other two should also match this height.

* {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  /* Safari/Chrome, other WebKit */
  -moz-box-sizing: border-box;
  /* Firefox, other Gecko */
}
#iconWrapper {
  display: table;
  margin-top: 50px;
  height: 500px;
}
.icon {
  float: left;
  width: 33.3%;
  text-align: center;
}
.explanation {
  text-align: left;
  width: 90%;
  min-height: 200px;
  margin: 0 auto;
  margin-top: 40px;
  border-radius: 10px;
  padding: 20px;
  margin: 20px;
}
.boxOrange {
  border: 2px solid RGBa(213, 99, 42, .4);
}
.boxBeige {
  border: 2px solid RGBa(211, 200, 175, .4);
}
.boxGreen {
  border: 2px solid RGBa(137, 176, 185, .4);
}

<div id="iconWrapper">
  <div class="icon">
    <img src="img/icon3.png" />
    <div class="explanation boxGreen">
      <h2 class="green">IT Support</h2>

      <p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ullamcorper dictum rutrum. Donec at dolor gravida, egestas magna non, egestas sem. Sed id massa ac lacus faucibus gravida sed nec nulla. Nam enim nisl.</p>
    </div>
  </div>
  <div class="icon">
    <img src="img/icon1.png" />
    <div class="explanation boxOrange">
      <h2 class="orange">Communications</h2>

      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ullamcorper dictum rutrum. Donec at dolor gravida, egestas magna non, egestas sem. Sed id massa ac lacus faucibus gravida sed nec nulla. Nam enim nisl.
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ullamcorper dictum rutrum. Donec at dolor gravida, egestas magna non, egestas sem. Sed id massa ac lacus faucibus gravida sed nec nulla. Nam enim nisl.</p>
    </div>
  </div>
  <div class="icon">
    <img src="img/icon2.png" />
    <div class="explanation boxBeige">
      <h2 class="beige">Cloud Solutions</h2>

      <p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ullamcorper dictum rutrum. Donec at dolor gravida, egestas magna non, egestas sem. Sed id massa ac lacus faucibus gravida sed nec nulla. Nam enim nisl.</p>
    </div>
  </div>
</div>

JS FIDDLE: http://jsfiddle.net/Qv8ak/

Answer 1

For future reference of someone crossing this question, if ancient browser support is not an issue, you can achieve equal height columns using css3 flexible box.

all you have to do is to apply display:flex for the parent element:

* {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  /* Safari/Chrome, other WebKit */
  -moz-box-sizing: border-box;
  /* Firefox, other Gecko */
}
#iconWrapper {
  display: flex;
  margin-top: 50px;
}
.icon {
  display: flex;
  width: 33.3%;
  text-align: center;
}
.icon::after {
  clear: both;
}
.explanation {
  text-align: left;
  width: 90%;
  min-height: 200px;
  margin: 0 auto;
  margin-top: 40px;
  border-radius: 10px;
  padding: 20px;
  margin: 20px;
}
.boxOrange {
  border: 2px solid RGBa(213, 99, 42, .4);
}
.boxBeige {
  border: 2px solid RGBa(211, 200, 175, .4);
}
.boxGreen {
  border: 2px solid RGBa(137, 176, 185, .4);
}

<div id="iconWrapper">
  <div class="icon">

    <div class="explanation boxGreen">
      <img src="img/icon3.png" />
      <h2 class="green">IT Support</h2>

      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ullamcorper dictum rutrum. Donec at dolor gravida, egestas magna non, egestas sem. Sed id massa ac lacus faucibus gravida sed nec nulla. Nam enim nisl.</p>
    </div>
  </div>
  <div class="icon">

    <div class="explanation boxOrange">
      <img src="img/icon1.png" />
      <h2 class="orange">Communications</h2>

      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ullamcorper dictum rutrum. Donec at dolor gravida, egestas magna non, egestas sem. Sed id massa ac lacus faucibus gravida sed nec nulla. Nam enim nisl. Lorem ipsum dolor sit amet,
        consectetur adipiscing elit. Aliquam ullamcorper dictum rutrum. Donec at dolor gravida, egestas magna non, egestas sem. Sed id massa ac lacus faucibus gravida sed nec nulla. Nam enim nisl.</p>
    </div>
  </div>
  <div class="icon">

    <div class="explanation boxBeige">
      <img src="img/icon2.png" />
      <h2 class="beige">Cloud Solutions</h2>

      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ullamcorper dictum rutrum. Donec at dolor gravida, egestas magna non, egestas sem. Sed id massa ac lacus faucibus gravida sed nec nulla. Nam enim nisl.</p>
    </div>
  </div>
</div>

JSFiddle

side note: in the case of this particular question, slight change in markup will be required for achieving the same layout. as i mentioned earlier i'm leaving this for future reference since flex is the new way for layouts, not float. it's time to start using floats for what it was actually meant for :)

Answer 2

Your .icon class is floating left which is causing the issue - you then need to add: "display: table-cell;" to your .explanation class.

Good luck!

Messed with your fiddle: http://jsfiddle.net/Qv8ak/10/

.explanation {
    display: table-cell;
}

Sorry for the slack answer - I'm new!

EDIT: Updated fiddle link to address the issues described in the comment section.

More info: http://www.senktec.com/2014/01/using-css-display-table-cell-for-columns/

Answer 3

use display:table-cell; on your .icon class and height:100% on .explanation

jsFiddle

.icon {
    display:table-cell;
    height: 100%;  /* Firefox Fix as per tsHunter */
    width:33.3%;
    text-align:center;
}
.explanation {
    text-align:left;
    width:90%;
    height: 100%;
    margin: 0 auto;
    margin-top:40px;
    border-radius:10px;
    padding:20px;
    margin:20px;
}

Answer 4

You needed to add display: table-cell to .icon, and height:100% to both .icon and .explanation.

jsFiddle