CSS 2 div大小自动相同高度

我有一个 CSS 问题：

我怎样才能做到这一点：

当绿色 div 的内容高度（自动）为 500px 时，红色 div 的高度相同。

当红色的内容高度（自动）为 700px 时，绿色的高度也相同。

两者都有任何内容，然后我使用自动高度。

那么我怎样才能做到绿色与红色和红色具有相同的宽度，但具有不同的内容和“高度：自动；”？

首先，阅读这篇优秀的文章。然后，检查小提琴：

http://jsfiddle.net/UnsungHero97/qUT3d/

HTML

<div id="container3">
    <div id="container2">
        <div id="container1">
            <div id="col1">Column 1</div>
            <div id="col2">Column 2</div>
            <div id="col3">Column 3</div>
        </div>
    </div>
</div>

CSS

#container3 {
    float:left;
    width:100%;
    background:green;
    overflow:hidden;
    position:relative;
}
#container2 {
    float:left;
    width:100%;
    background:yellow;
    position:relative;
    right:30%;
}
#container1 {
    float:left;
    width:100%;
    background:red;
    position:relative;
    right:40%;
}
#col1 {
    float:left;
    width:26%;
    position:relative;
    left:72%;
    overflow:hidden;
}
#col2 {
    float:left;
    width:36%;
    position:relative;
    left:76%;
    overflow:hidden;
}
#col3 {
    float:left;
    width:26%;
    position:relative;
    left:80%;
    overflow:hidden;
}​