html - 親内の複数の要素を垂直方向に整列

Question

流動的に設計されたヘッダーを垂直方向に配置する方法を1日以上検索しているため、フォントサイズや特定のピクセルを知らなくても、3つのdivが同じ高さになり、それらの内部のコンテンツが同じ行になります。

ここに私が今持っているもののフィドルの例がありますので、私が必要なものをよりよく理解できるかもしれません.

そして、これはコードです：

HTML:

<div id="container">
<div id="header">
    <div id="menu">     
        <a href="#">
            <img src='http://s16.postimg.org/uwgkp15r5/icon.png' border='0' alt="icon" />
        </a>
    </div>
    <div id="title">
        My site title
    </div>
    <div id="my_button">
        <button id="button">My button</button>
    </div>
    <div style="clear: both;"></div>
</div>
<div id="content"></div>
</div>

CSS:

html,body {
height: 100%;
font-size: 2vmin;
}

#container {
height: 100%;
min-height: 100%;
}

#header {
height: 20%;
padding: 2vmin 0 2vmin 0;
box-sizing: border-box;
background: #000000;
width: 100%;
}

#menu{
background: #5f5f5f;
float: left;
width: 20%;
text-align: center;
}

#title {
background: #aaaaaa;
height: 100%;
float: left;
font-size: 3vmin;
width: 60%;
text-align: center;
}

div#my_button {
background: #cccccc;
float: right;
width: 20%;
}
button#button {
color: #aaaaaa;
border: none;
}

#content {
height: 70%;
width: 100%;
background: #eeeeee;
}