make all columns the same height if one has a picture in with width set to 100%

Question

I am trying to make the far left column the same height as the other two columns with pictures in with their width set to 100%. I can do this if I specify the height in the parent div, but then the images are not responsive.. below is my code I am using..

.gcolumn {
  float: left;
  width: 33.33%;
  height: auto;
  display: table-cell;
  overflow: hidden;
  z-index: 1;
  float: left;
  margin-bottom: -99999px;
  padding-bottom: 99999px;
}

.gtext {
  text-align: center;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  height: 100%;
  right: 0;
  top: 0;
}

.grow {
  display: table;
  overflow: hidden;
}

.gcolumn img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: 100%;
  height: 100%;
}

@media screen and (max-width: 700px) {
  .gcolumn {
    width: 100%;
  }
}

<div class="grow">
  <div class="gcolumn" style="background-color:#E3EAEA">
    <div class="gtext">
      <h2>example header</h2>
      <p>this is some example etxt this is some example etxt this is some example etxt this is some example etxt this is some example etxt this is some example etxt this is some example etxt</p>
    </div>
  </div>
  <div class="gcolumn" style="background-color:#bbb;">
    <img src="https://photo.mybuilder.com/2_thumb/4496591_fca4d53347.jpg" />
  </div>
  <div class="gcolumn" style="background-color:#bbb;">
    <img src="https://photo.mybuilder.com/2_thumb/4496591_fca4d53347.jpg" />
  </div>
</div>

I have also used the following CSS which does fix my problem, but reading the comments from other people they say its really tacky and not a good way to do it... And it also messes up text, making in to vertical and horizontal in the middle. Why is this method tacky and shouldn't be used? what repercussions would this have?

Changed part of CSS

.gcolumn {
    float: left;
    width: 33.33%;
    height: auto;
    display: table-cell;
    overflow: hidden;
    z-index: 1;

    /* extra   */      
    float: left;
    margin-bottom: -99999px;
    padding-bottom: 99999px;
}

.grow {
    display: table;

    /* extra   */  
    overflow: hidden; 

}

I have used the following link to try other options but so far non have worked for what I want:

CSS - Expand float child DIV height to parent's height

How would be the best way in for me to make all three columns the same height while still keeping my images responsive and ensuring the text remains in the middle of the div

Below is a jsfiddle of what I currently have

https://jsfiddle.net/z3b5p92d/14/

Any help on this would be greatly appreciated

score 2 · Accepted Answer · answered Jun 13 '18 at 13:18

I would use flex for this - it does equal height columns by default:

.grow {
  display: flex;
  flex-direction: row;
}

.gcolumn img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: 100%;
  height: 100%;
}

<div class="grow">
  <div class="gcolumn" style="background-color:#E3EAEA">
    <div class="gtext">
      <h2>example header</h2>
      <p>this is some example etxt this is some example etxt this is some example etxt this is some example etxt this is some example etxt this is some example etxt this is some example etxt</p>
    </div>
  </div>
  <div class="gcolumn" style="background-color:#bbb;">
    <img src="https://photo.mybuilder.com/2_thumb/4496591_fca4d53347.jpg" />
  </div>
  <div class="gcolumn" style="background-color:#bbb;">
    <img src="https://photo.mybuilder.com/2_thumb/4496591_fca4d53347.jpg" />
  </div>
</div>

make all columns the same height if one has a picture in with width set to 100%

1 Answers1