Chris777 Chris777 - 5 months ago 9
HTML Question

Equal height columns in Firefox (CSS)

I have an issue with equal height columns and I know these sort of questions are asked technically all the time (from what I got from my research) but unfortunately I've hit a point at which I just don't know what else to try.

I have my equal height columns in Chrome and Opera but somehow Firefox doesn't like the way I did it.

I have a simple mark up

<section id="env">
<div class="container">
<div class="content">
<p>
Way more content than in all the others because this one has so much to say and doesn't know when to stop...it always does that...
</p>
</div>
</div>
<div class="container">
<div class="content">
<p>
Content 2
</p>
</div>
</div>
<div class="container">
<div class="content">
<p>
Content 3
</p>
</div>
</div>
</section>


and the #env div is displayed as a table, the .container divs as table-cells.

#env {
display: table;
width: 100%;
border-collapse: separate;
border-spacing: 5px;
}

.container {
display: table-cell;
border 25px solid transparent;
width: 33.33333%;
}

.content {
background: red;
display: inline-block;
vertical-align: top;
height: 100%;
width: 100%;
border-radius: 3px;
}

p {
padding: 0 20px;
}


I created a fiddle for this to focus on the issue: https://jsfiddle.net/vy3Lzu75/1/

If you open it in Chrome or Opera, you should see three equally high, red columns. In Firefox, however, the red columns correspond to their individual content instead of to the actual container.

I'd be very greatful if anyone can point me into the right direction because everything I've tried so far (setting height of parent to 1px, setting min-height of child, different display values...) didn't do the trick in FF.

Thanks in advance!

Answer

the cells are here drawing the columns. border-spacing can be used to set some area around .

#env {
  display: table;
  width: 100%;
  border-collapse: separate;
  border-spacing: 30px 5px;
}

.container {
  display: table-cell;
  width: 33.33333%;
  background: red;
  border-radius: 3px;
  vertical-align: top;
}

.content {
}

p {
  padding: 0 20px;
}
<section id="env">
  <div class="container">
    <div class="content">
      <p>
        Way more content than in all the others because this one has so much to say and doesn't know when to stop...it always does that...
      </p>
    </div>
  </div>
  <div class="container">
    <div class="content">
      <p>
        Content 2
      </p>
    </div>
  </div>
  <div class="container">
    <div class="content">
      <p>
        Content 3
      </p>
    </div>
  </div>
</section>

https://jsfiddle.net/vy3Lzu75/2/


If you want the content to fill all space avalaible, you need to inbricate flex boxes and margin comes avalaible to separate each cols :

#env {
  display: flex;
  width: 100%;
  border-collapse: separate;
  border-spacing: 5px;
}

.container {
  display: flex;
  flex-flow:column;
  margin:5px 30px;
  width: 33.33333%;
  background: red;

}

.content {
  flex:1;
  background:green;
  border-radius: 10px;
}

p {
  padding: 0 20px;
}
<section id="env">
  <div class="container">
    <div class="content">
      <p>
        Way more content than in all the others because this one has so much to say and doesn't know when to stop...it always does that...
      </p>
    </div>
  </div>
  <div class="container">
    <div class="content">
      <p>
        Content 2
      </p>
    </div>
  </div>
  <div class="container">
    <div class="content">
      <p>
        Content 3
      </p>
      <p>
        Content 4
      </p>
    </div>
  </div>
</section>

https://jsfiddle.net/vy3Lzu75/7/