CSS - make all elements the same height as the tallest element

Question

I have a problem where I have three floating buttons in a div. one of the buttons has more content that the others, so it\'s taller.

I want to be able to make all bu

Answer 1

How about using min-height? updated fiddle

 .container {
   width: 320px;
 }
 .container button {
   float: left;
   background: #FFFFFF;
   border: 1px solid #CCCCCC;
   width: 33.33%;
   min-height: 40px;
 }

<div class="container">
  <button>
    <span class="big-text">Okay</span>
    <span class="little-text">123</span>
  </button>
  <button>
    <span class="big-text">Another Option</span>
    <span class="little-text">456</span>
  </button>
  <button>
    <span class="big-text">Nah!</span>
    <span class="little-text">789</span>
  </button>
</div>

Answer 2

You can do this cross browser without display:flex with the CSS rules padding-bottom: 999999em;and margin-bottom: -999999em;on the floated element this will force the webbrowser to render an equal height. And you need an overflow: hidden on the parent element

see demo https://jsfiddle.net/xpdxyaz6/3/

Answer 3

Just add display:flex to your container class like this:

.container {
    width: 320px;
    display:flex;
}

jsFiddle: https://jsfiddle.net/AndrewL32/xpdxyaz6/2/

---

NOTE:

The Flex property however is compatible only from:

Google Chrome v21.0 above (-webkit-)

Internet Explorer v10.0 above (-ms-)

Mozilla Firefox v18.0 above (-moz-)

Safari v6.1 above (-webkit-)

Opera v12.10 above