same heigh rows with different content size

same heigh rows with different content size

by heriberto perez

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<div class="row row-overflow">
  <div class="col-xs-12 col-sm-4" style="background-color: red">
  some content
  </div>
  <div class="col-xs-6 col-sm-4" style="background-color: yellow">
  no kittenz :(
  <img src="http://placehold.it/50x150">
  </div>
  <div class="col-xs-6 col-sm-4" style="background-color: pink">
  some more contentasdfasdf asdfasdfas
      dfasdf
      asdfasdfasdfasdfasdfasdfasdfasdfasdfas
      dfasdfasdfasdfasdfasdfasdfasdfas
      dfasdfasdfasdfasdfasdfasdfasdfasdf
      asdfasdfasdfasdfasdfasdfasdfasdfasdfasdf
      asdfasdfasdfasdfasdfas
      dfasdf
      asdf
      asdf
      asdf
      asdfasdfasdfasdfasdf
      <br/>
        some more contentasdfasdf asdfasdfas
      dfasdf
      asdfasdfasdfasdfasdfasdfasdfasdfasdfas
      dfasdfasdfasdfasdfasdfasdfasdfas
      dfasdfasdfasdfasdfasdfasdfasdfasdf
      asdfasdfasdfasdfasdfasdfasdfasdfasdfasdf
      asdfasdfasdfasdfasdfas
      dfasdf
      asdf
      asdf
      asdf
      asdfasdfasdfasdfasdf
  </div>
</div>

CSS

.row-overflow [class*="col-"]{
  margin-bottom: -99999px;
  padding-bottom: 99999px;
}

.row-overflow{
  overflow: hidden; 
}