Flexbox

Assuming this layout:

<div class="row">
  <div class="col">...</div>
  <div class="col">...</div>
</div>

With flexbox, same height is just one declaration:

.row {
  display: flex; /* equal height of the children */
}

.col {
  flex: 1; /* additionally, equal width */
}

Browser support: http://caniuse.com/flexbox; demo: http://jsfiddle.net/sdsgW/

@media (min-width: 992px) {
  .flex-item-info {  flex: 1 0 auto;                  /* NEW, Spec - Opera 12.1, Firefox 20+ Chrome 42+ */
@media (max-width: 991px) {
  .flex-item-info { flex: 1 0 0;                  /* NEW, Spec - Opera 12.1, Firefox 20+ Chrome 42+ */

css:

.footer-wrapper {
  position: relative;
  min-height: 100%;
}

.footer {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
}

html:

body
  .footer-wrapper
    .footer

http://stackoverflow.com/questions/306252/how-to-align-checkboxes-and-their-labels-consistently-cross-browsers

HTML

<div id="greetings">
  Hello universe!
</div>

CSS

#greetings { 
  width: 100px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; // This is where the magic happens
}