How to get div columns to be same height?

Question

I'm trying to understand how to put two div's next to eachother inside a wrapper and have them both column div's to match heights at all times, even if one has more content than the other, all without applying a strict height to the column. I've tried using height:100% and doesn't seem to work, here is the code/fiddle to show what I mean. Does anyone know what I am talking about and how to get this working?

 <div class="wrapper">
 <div class="left"><img src="https://i.sstatic.net/Sv4BC.png"/></div>
 <div class="right">
 <div class="stretch">
 stretch to height: 100%
 </div>
 </div> 
 <div class="fix"></div>
 </div>

CSS:

.wrapper{background:#eee;padding:10px;}
.stretch{height:100%;}
.left,.right{float:left;padding:5px;background:#FFF;}
.fix{clear:both;}
.left img{width:200px;}

Fiddle: (The two columns should be identical) https://jsfiddle.net/19zsdswt/1/

• Jhecht: I may be wrong, but with the scenario you've got I don't believe it's possible for the right column to know the height of the second column because of the floats. Hopefully someone corrects me (I haven't kept up on all the random CSS tricks), but otherwise you're going to have to find a different way to set it all up.

Answer 1

I think the problem is with trying to add a height: 100% to a div that is floated.

You could try using a table, table cell relationship, like this:

.wrapper{display: table; background:#eee;padding:10px;}
.stretch{height:100%;}
.left,.right{display: table-cell; padding:5px;background:#FFF;}
/* .fix{clear:both;} */
.left img{width:200px;}

I have updated your fiddle here - https://jsfiddle.net/sfyt9skx/

• Bitwise Creative: Nice and simple. Good answer. (opposed to a mess like this: matthewjamestaylor.com/blog/… ... yuck.)