HTML＆CSS：div中两个高度相同的div

Question

Firstly, excuse me for my bad english. But I have a problem with CSS.

I want to make the same height in color block in Div column.

The block green is not the same height as the blue block. I want them to be at same height.

The block : http://postimg.org/image/ej2jujnt1/

<div class=cols>
    <div class="col col-1-3">
        <div class="bloc">
    </div>
    <div class="col col-2-3">
        <div class="bloc">
        </div>
        <div class="bloc">
        </div>
    </div>
</div>

.cols {
    position: relative;
    clear: both;
}

.cols > .col-1-3, .cols > .col-1-3 + .col-1-3 + .col-1-3 {
    width: 307px;
}

.cols > .col {
    float: left;
}

.cols > .col + .col {
    margin-left: 14px;
}

.cols > .col-2-3 {
    width: 629px;
}

.bloc {
    position: relative;
    z-index: 1;
    overflow: hidden;
    margin: 0px 0px 14px;
    box-shadow: 0px 2px 5px 1px #BFBFBF;
    border-radius: 3px 0px 0px;
    background-color: #FFF;
}

Is there any possible solution?

Thanks,

Vincent

Answer 1

I suggest you to use flexbox but it`s not supported by IE9 unfortunatelly

The soultion is to add class for vertical column and style it like this:

* {
  box-sizing: border-box;
}
.bloc {
    position: relative;
    z-index: 1;
    width: 100%;
    overflow: hidden;
    box-shadow: 0px 2px 5px 1px #BFBFBF;
    border-radius: 3px 0px 0px;
    background-color: #FFF;
}

.cols {
  width: 80%;
  display: flex;
  margin: auto;
}
.col {
  display: flex;
  &.col-1-3 {
    flex: 1 1 33%;
    margin-right: 15px;
  }
  &.col-2-3 {
    flex: 1 1 66%;

  }
  &.col-vertical {
    display: flex;
    flex-direction: column;
    .bloc {
      display: flex;
      flex: 1 1 auto;
      margin-bottom: 15px;
      &:last-child {
        margin-bottom: 0;
      }
    }
  }
}

Here's codepen: http://codepen.io/insanepl/pen/doEKLz?editors=110