css 3 float 问题

Question

我有三个 float ，我需要在三个 div 中使用它，因为顶部 float 是动态的，就像 youtube 扩展视频选项一样。反正后面是三浮，两左一右，右浮只在第二浮右上，不往上移动。

<center>
<div style="width: 1024px;">
    <div style="width: 100%;">
       header content here..
    </div>
    <div class="clear"></div>
    <div style="width: 630px; float: left">
        video here...   right float should show next to this box, sence this is below the header...
    </div>

    <div style="width: 630px; float: left">
        comments here and other options...
    </div>

    <div style="width: 230px; float: right">
       related videos here..   (this box goes above and touchs the comment area only, but does not go all the way up to video area, what im doing wrong? btw i cant put comment and video in same div, because of some dynamic feature.
    </div>
</div>
<center>

注意:我无法更改 div 顺序...

Answer 1

<center>

    <div id="wrap" style="width: 1024px;position:relative;">

        <div id="header" style="width: 100%;">
       header content here..       header content here..       header content here..       header content here..       header content here..       header content here..       header content here..       header content here..       header content here..       header content here..       header content here..       header content here..       header content here..       header content here..       header content here..       header content here..       header content here..       header content here..       header content here..       header content here..       header content here..       header content here..       header content here..       header content here..       header content here..       header content here..       header content here..       header content here..       header content here..       header content here..
        </div> <!-- END OF id=header-->

        <div class="clear"></div>

        <div id="leftColumn" style="width: 630px; float: left;">

            <div id="video">
                video here...
            </div>

            <div id="comments">
                comments here and other options...
            </div>

        </div> <!-- END OF id=leftColumn-->

        <div id="rightColumn" style="width: 230px; float: right;">
       related videos here..   (this box goes above and touchs the comment area only, but does not go all the way up to video area, what im doing wrong? btw i cant put comment and video in same div, because of some dynamic feature.
        </div> <!-- END OF id=rightColumn-->

    </div> <!-- END OF id=wrap-->

</center>

http://jsfiddle.net/borayeris/tDdvA/