使浮动div更高的高度或容器

Question

请参阅http://jsfiddle.net/RZzwP/

在div中，我有两个宽度为50％的可变高度div，一个向左浮动，一个向右浮动。

我希望所有三个div的高度等于两个子div最大的高度。

一个小的复杂因素是我想要一些中间的文本（跨越50％的分区），使表格变得棘手（/不可能？）。

<div class="or cf">
    <div class="a"><h1>A!</h1></div>
    <span>OR</span>
    <div class="b or cf">
        <div class="a"><h1>B</h1></div>
        <span>OR</span>
        <div class="b"><h1>C</h1></div>
    </div>
</div>

css是:( class cf是this clearfix）

.or {
    width: 100%;
    position: relative;
}
.or > .a {
    width: 50%;
    height: 100%;
    z-index: 0;
    float: left;
}
.or > .b {
    width: 50%;
    height: 100%;
    z-index: 0;
    float: right;
}
.or > .or > .a {
    width: 100%;
    height: 50%;
}
.or > .or > .b {
    width: 100%;
    height: 50%;
}
.or span {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -0.5em;
    margin-left: -20px;
    width: 40px;
    z-index: 1;
}

正如您从我的jsFiddle中看到的那样，其中A!和C!的div不会延伸到其父级的底部。

我怎么能这样做？