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/

的感谢！

Answer 1

的问题是在这里：

<div class="noborder" style="clear: both; width: 100%; height: 0px; line-height: 0px; font-size: 0px;"> </div> 

你告诉它clear:both所以这个元素之后的任何花车将开始一个新行。

花车是一个难题，请参阅：http://css-tricks.com/all-about-floats/了解一些关于它们的良好信息以及它们是如何工作的。