Uniform div height and button alignment

Question

I have three divs that need to be the same height and have a button at the same level, but are containing varying amounts of text above and below the button.

Right now I'm just specifying heights to compensate for how long the text might be, but if it's not that long, there's too much padding, and it still might not be high enough.

This needs to work with IE9+, and the latest chrome and firefox. I'm starting to think the best solution is javascript unless there's a CSS miracle. display: flex looked promising, but don't think it'll work with IE9

See image below. The space between the titles and the buttons should be controlled by the longest title. Right now it's just a hard coded height. Similarly card heights should be controlled by the tallest card, but it's currently hard coded.

enter image description here

You are right. The `display:flex` option only works with IE11+. I think there are several approaches one can get to do this, I'll think about it for a moment. For now, the main question: is the place where these columns are a fixed width? — SparoHawk, Dec 16 '14 at 16:21
possible duplicate of [Use jQuery/CSS to find the tallest of all elements](http://stackoverflow.com/questions/6781031/use-jquery-css-to-find-the-tallest-of-all-elements) — Sleek Geek, Dec 16 '14 at 16:26
@SparoHawk (if I understand) The row isn't a fixed width, but the cards are. — MStodd, Dec 16 '14 at 16:34
I hate to say it, but perhaps the simplest way to handle it is to use a table. — Ted, Dec 16 '14 at 16:45

score 3 · Answer 1 · answered Dec 16 '14 at 20:55

Here's a solution using display:table which should get you started:

HTML

<div id="wrapper">         <!-- Sets the size of the entire section -->
  <div id="row1">          <!-- Becomes your table row -->
    <div id="cell1">       <!-- Becomes the table cell -->
      <p>Information</p>
    </div>
    <div id="cell2">
      <p>A section of text</p>
    </div>
    <div id="cell3">
      <p>Some text and other stuff - even divs.</p>
    </div>
  </div>
</div>

CSS

#wrapper {
  height:100%;
  width:100%;
}
#wrapper div {
  border:1px solid black;
}
#row1 {
  display:table;        /* Creates the table */
}
#row1 > div {
  display:table-cell;
  width:30%;            /* Sets the width of each table cell */
  height:auto;          /* Expands the height of the entire row as content is added */
}

Here's a CodePen demo with a mockup. The nice thing about this is that you can still use HTML5 and CSS3 for all of your content and styling.

The main issue is getting the buttons in the middle lined up. That's not addressed here — MStodd, Dec 17 '14 at 18:07
Style them as divs within the cell as you would on a normal page. I don't have time at the moment to do a full workup - but within each cell, you can use normal positioning as if you were on a full page. — Brian, Dec 18 '14 at 01:03

score 1 · Accepted Answer · answered Dec 16 '14 at 16:56

1

Here's an example of how to handle it with a <table> instead of divs--that way no js is required:

Table Demo

answered Dec 16 '14 at 16:56

Ted

14,757
2
41
58

2

Honestly, I'd suggest using divs, but with `display:table` in the CSS. Achieves the same thing, but more flexible in the application. – Brian Dec 16 '14 at 17:38
@BrianBennett I like it – MStodd Dec 16 '14 at 18:53
@MStodd Added a full answer below. – Brian Dec 16 '14 at 20:59
Yeah, I like that solution better. Tables make me feel dirty lol – Ted Dec 17 '14 at 16:35

Uniform div height and button alignment

2 Answers2