I am having problems clearing a floated object in the center column of a 3 col layout. The 3 col layout has floating left/right columns. In the center I am floating a div to the left. When I attempt to clear the object in the center it attempts to clear the left column instead. I give up. Please help

Sample code is posted below:

Code:
<!DOCTYPE html>
<html>
<head>
<style>
   div { padding: 10px; }
   #main { width: 500px; background-color: green; }
   #leftcol { float: left; width: 100px; height: 175px; background-color: Yellow; }
   #rightcol { float: right; width: 100px; height: 300px; background-color: Orange; }
   #centercol { margin-left: 120px; margin-right: 120px; background-color: White; }
   #centerGrayBox { float: left; width: 75px; height: 100px;  background: grey; display: block; }
   #centerBlueBox { clear: left; background-color: Blue; }
   #bottomBox { clear: both; background-color: Purple; }
</style>
</head>
<body>
<h2>Basic 3 col layout</h2>
<div id="main">
   <div id="leftCol">
      float: left;<br />
      width: 100px<br />
   </div>
   <div id="rightCol">
      float: right;<br />
      width: 100px<br />
   </div>
   <div id="centerCol">
      #centerCol<br />
      <div id="centerGrayBox">
        float: left;<br />
        width: 75px;
      </div>
      i want to clear the grey box so the next div is right under it.
   <div id="centerBlueBox">
      clear:left puts this box too far down...I want this div to be right under the grey one!
   </div>
</div>
<div id="bottomBox">#bottomBox (clear: both)</div>
</div>
</body>
</html>
Screen Shot:

Capture.PNG

Thanks!