How to make columns the same height, regardless of content, and vertically-align buttons within those columns?

Question

I\'m trying to make a column layout, with content in each, and I want them to be the same height but I\'m not able to get it to work.

One of the columns is higher th

Answer 1

As far as vertically aligning the content,check this article out:

http://phrogz.net/css/vertical-align/

You set a parent container to position: relative, then your content to position:absolute; top: 50%; height: 10em; margin-top: -5em;

basically the top margin is - 1/2 the container height.

Answer 2

If you want to perfectly recreate that layout, Flexbox can do that.

http://codepen.io/cimmanon/pen/enurd

.row {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  /* fix for Firefox */
  width: 100%;
}

.block {
  min-width: 30%;
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  -webkit-flex: 1 30%;
  -ms-flex: 1 30%;
  flex: 1 30%;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: vertical;
  -moz-box-orient: vertical;
  -webkit-box-direction: normal;
  -moz-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: justify;
  -moz-box-pack: justify;
  -ms-flex-pack: justify;
  -webkit-justify-content: space-between;
  justify-content: space-between;
}

.block h3 {
  margin-top: 0;
  margin-bottom: 1em;
}

.block div {
  text-align: center;
  margin-top: 1em;
}

/* pretty it up! */
body {
  background: #ccccff;
}

.block {
  background: white;
  margin: 0 .5em;
  padding: 1em;
  border: 1px solid;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -moz-border-radius: 1em;
  -webkit-border-radius: 1em;
  border-radius: 1em;
}

   <div class="row">
<div class="block">
    <h3>Header 1</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus porta elit vel ante hendrerit facilisis. Curabitur aliquam sollicitudin diam, id posuere elit consectetur nec. Vestibulum quam dolor, feugiat in posuere a, posuere imperdiet tellus.</p>
    <div><a class="btn btn-success" href="#">Some Button</a></div>
</div>
  
<div class="block">
    <h3>Header 1</h3>

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus porta elit vel ante hendrerit facilisis. Curabitur aliquam sollicitudin diam, id posuere elit consectetur nec. Vestibulum quam dolor, feugiat in posuere a, posuere imperdiet tellus. Mauris sed ligula vitae urna consequat aliquet. Curabitur pellentesque consectetur ornare. Pellentesque vel euismod odio. Nulla tempus pharetra nulla. In justo dolor, sollicitudin nec commodo sit amet, adipiscing eget lectus.</p>

    <div><a class="btn btn-success" href="#">Some Button</a></div>
</div>
  
<div class="block">
    <h3>Header 1</h3>

    <p>Mauris sed ligula vitae urna consequat aliquet. Curabitur pellentesque consectetur ornare. Pellentesque vel euismod odio. Nulla tempus pharetra nulla. In justo dolor, sollicitudin nec commodo sit amet, adipiscing eget lectus.</p>
    
    <div><a class="btn btn-success" href="#">Some Button</a></div>
</div>
</div>

This works in Firefox, Safari, Chrome, Opera, and IE10. If you need wider support than that, using display: table/table-row/table-cell is your next best bet. http://caniuse.com/#feat=flexbox

Answer 3

You could do equal height columns technique:

.row {
    overflow:hidden;
}
.span4 {
    padding-bottom:32767px;
    margin-bottom:-32767px;
}

To achieve vertically centered text content is really tricky. I would try using

.row {
    display:table;
}
.span4 {
    display:table-cell;
    vertical-align:middle;
}

but you'll have to tweak it further and I'm not sure if it will really work out and which browsers do support it really.