div element arrangement

Question

can anyone tell me why #contHolder div doesn't get pushed up to the first row? replacing the tables elements with "any text content" and everything is aligned properly.

<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>

here's a fiddle

http://jsfiddle.net/KzJN3/

updated fiddle: http://jsfiddle.net/KzJN3/2/

thanks!

Answer 1

The problem is here:

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

You told it to clear:both so any floats after this element will start on a new row.

Floats are a difficult topic, see: http://css-tricks.com/all-about-floats/ for some good information on them and how they work.