css - ウィンドウ サイズを拡大または縮小するときに列の高さを同じに維持する

Question

コンテナー div 内に 2 つの列がありwidth of 50%、1 つの列にはダミー テキストがあり、もう 1 つの列には Google マップの iframe があります。マップの周りに流体コンテナーをラップし、コンテナーposition absolute;内のマップを拡張するために iframe に適用しましたが、マップが連絡先列をはるかに超えて縮小および拡張しているように見えることに気付きました。マップを一貫して他の柱と同じ高さ？このレイアウトを滑らかに保つ必要があるため、100% 幅全体

JSFiddle: http://jsfiddle.net/Xm6GW/1/

CSS

.col-ctn {
    width: 100%;
}
.col {
    width: 50%;
    background: silver
}
.contact-col {
    float: left;
}
.map-col {
    float: right;
}
.fluid-map {
    position: relative;
    padding-bottom: 100%;
    height: 0;
}
.fluid-map iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}