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/

you want all `.explanation`'s to be the same height based off the longest one? — 13ruce1337, Jun 06 '14 at 16:21

score 2 · Answer 1 · edited Jun 06 '14 at 16:58

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/

edited Jun 06 '14 at 16:58

Hristo Valkanov

1,689
22
33

answered Jun 06 '14 at 16:23

jamki

51
4

I need to float them left to be next to each other? – MRC Jun 06 '14 at 16:27
1

So the boxes stretch the height now, but they have no margins, width's are off, and he has no icons above them now. It's fixed one issue but created more :P – The_DemoCorgin Jun 06 '14 at 16:28

MilkyTech · Accepted Answer · 2014-06-06T16:46:38.877

2

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

edited Jun 06 '14 at 16:46

answered Jun 06 '14 at 16:31

MilkyTech

1,919
2
15
39

1

I'm still getting improper heights with this on Firefox. Adding `height:100%` to `.icon` as well corrected the heights for me. – The_DemoCorgin Jun 06 '14 at 16:35
also remove 'float: left;' from the '.icon' class, and you won't have to add 'height: 100%' – ringstaff Jun 06 '14 at 16:43
there you go! +1. I don't use that crappy browser so I wouldn't know. – MilkyTech Jun 06 '14 at 16:44
@ringstaff The float is removed and the height is required. see the fiddle – MilkyTech Jun 06 '14 at 16:49

score 0 · Answer 3 · answered Jun 06 '14 at 16:34

0

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

jsFiddle

answered Jun 06 '14 at 16:34

The_DemoCorgin

744
6
19

T J · Answer 4 · 2015-12-23T12:26:37.200

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

Equal height divs using css

4 Answers4