css - div の境界線を最も高い兄弟の高さに拡張し、背景色を div の高さ全体に拡張します

Question

現在、div と CSS を使用してテーブルを再設計しています (テーブルがモバイル デバイスでうまく表示されないため)。しかし、私はデザインの一部にこだわっています。div の境界線を完全な高さ (兄弟によって決定されます) に拡張するようには見えず、「ヘッダー」列の背景色を div の高さ全体に広げるようには見えません。

#sol-table {
    border-left: 1px solid #CCCCCC;
    border-right: 1px solid #CCCCCC;
    border-top: 1px solid #CCCCCC;
}

#sol-header {
    border-bottom: 1px solid #CCCCCC;
}

.sol-state-statute, .sol-state-open, .sol-state-promissory, .sol-state-oral, .sol-state-written {
    border-left: 1px solid #CCCCCC;
}

.sol-state {
    border-bottom: 1px solid #CCCCCC;
}

#sol-header, .sol-state {
    overflow: hidden;
}

#sol-header, .sol-state-name {
    background-color: #F0F0F0;
}

.sol-state-odd {
    background-color: #FFFFFF;
}

.sol-state-even {
    background-color: #F7F7F7;
}

.sol-header-info, .sol-state-info {
    float: left;
    width: 10%;
    text-align: center;
}

.sol-state-info {
    text-align: center;
}

.sol-state-name, .sol-state-statute {
    text-align: left;
}

#sol-header-state, .sol-state-name {
    width: 12%;
}

#sol-header-open, .sol-state-open {
    width: 15%;
}

#sol-header-statute, .sol-state-statute {
    width: 40%;
}



<div id="sol-table">

    <div id="sol-table-content">

        <div id="sol-header">
            <div class="sol-header-info" id="sol-header-state">State</div>
            <div class="sol-header-info" id="sol-header-written">Written Contracts</div>
            <div class="sol-header-info" id="sol-header-oral">Oral Contracts</div>
            <div class="sol-header-info" id="sol-header-promissory">Promissory Notes</div>
            <div class="sol-header-info" id="sol-header-open">Open-Ended Accounts<br />(e.g., Credit Cards)</div>
            <div class="sol-header-info" id="sol-header-statute">Link to Statute(s)</div>
        </div>

        <div class="sol-state sol-state-odd" id="sol-alabama">
            <div class="sol-state-info sol-state-name">Alabama</div>
            <div class="sol-state-info sol-state-written">#</div>
            <div class="sol-state-info sol-state-oral">#</div>
            <div class="sol-state-info sol-state-promissory">#</div>
            <div class="sol-state-info sol-state-open">#</div>
            <div class="sol-state-info sol-state-statute">Line 1<br />Line 2<br />Line 3<br /></div>
        </div>

        <div class="sol-state sol-state-even" id="sol-alaska">
            <div class="sol-state-info sol-state-name">Alaska</div>
            <div class="sol-state-info sol-state-written">#</div>
            <div class="sol-state-info sol-state-oral">#</div>
            <div class="sol-state-info sol-state-promissory">3</div>
            <div class="sol-state-info sol-state-open">#</div>
            <div class="sol-state-info sol-state-statute">Line 1<br />Line 2<br />Line 3<br />Line 4<br />Line 5<br />Line 6<br /></div>
        </div>

    </div>

</div>

これが私の現在のコードです: http://jsfiddle.net/KYthh/。

ご覧のとおり、「Alabama」と「Alaska」の div には背景色があり、div を埋めるために適切に拡大されていません。また、テーブル内の残りの div のほとんど (最も高い div は明確な例外です) には背景色があります。高さいっぱいまで適切に拡張されていない境界線。

(残念ながら) このコードを IE で動作させる必要があるため、display-table などに頼らずにこれらの調整を行う方法を見つけたいと思います。可能であれば、jQuery の代わりに CSS を使用したいと考えています。