html - div要素の配置

Question

#contHolder div が最初の行に押し上げられない理由を誰か教えてもらえますか? テーブル要素を「任意のテキストコンテンツ」に置き換えると、すべてが適切に配置されます。

<div id="footerWrapper"style="display: block; width:100%;">
    <div id="firstCol" style="float:left; width: 30%;">
        <div id="footerProjectTitle" style="float: left; width: 100%; background-color:red;">title</div> 
        <div style="clear:both"></div>  
        <div id="contHolder"style="float: left; width: 30%; background-color: #ffc0cb;">
            <table>
            </table>
        </div>
    </div>
    <div id="secondCol" style="float:left; width: 30%;">
        <div id="linkHolder"style="float: left; width: 100%; background-color: #f0ffff;">
            <table>
            </table>
        </div>
    </div>
</div>

ここにフィドルがあります

http://jsfiddle.net/KzJN3/

更新されたフィドル: http://jsfiddle.net/KzJN3/2/

ありがとう！