css - div を左にフローティングすると、別の div のテキスト コンテンツがプッシュされます

Question

オーバーフローが表示に設定されている場合 (非表示に設定されていない場合)、1 つの div 要素で左にフローティングすると、position:absolute を持つ別の要素がその div コンテナーの外側にテキストを再配置します。ここで状況を再現しました: http://jsfiddle.net/Thohar/9M2CX/ CSS:

#left {
    width: 150px;
    height:100%;
    background-color: #77BDC9;
    float: left;
    margin-top: 100px; /* to get beneath the */
}

#tha_fly {
    height: 300px;
    width: 200px;
    position: relative;
    overflow: visible; /* IMPORTANT - only when set to hidden will the text content stay inside div*/
    top: 200px;
    left: 500px;
}