3列布局 auto问题

大家好 问个问题如下：

比如我有个页面：
<div style="margin-left:auto;margin-right:auto;width:900px;height:auto;">
  <div style="float:left;width:300px;background-color:red;height:auto;">
  ccccc<br/><br/><br/><br/><br/><br/><br/><br/>
  </div>

  <div style="float:left;width:300px;background-color:blue;height:auto;">
  bbbb<br/><br/><br/>
  </div>
  
  <div style="float:left;width:300px;background-color:green;height:auto;">
  aaaa<br/><br/><br/>
  </div>
</div>

<div id="footer" style="height:100px;background-color:pink;">

</div>

我想实现的效果是中间3列布局 footer 显示在页面底下 可是以上代码footer显示在页面顶部 感到不解 请大侠指教!

<div style="margin-left:auto;margin-right:auto;width:900px;height:auto;">
  <div style="float:left;width:300px;background-color:red;height:auto;">
  ccccc<br/><br/><br/><br/><br/><br/><br/><br/>
  </div>

  <div style="float:left;width:300px;background-color:blue;height:auto;">
  bbbb<br/><br/><br/>
  </div>
  
  <div style="float:left;width:300px;background-color:green;height:auto;">
  aaaa<br/><br/><br/>
  </div>
</div>
<div style="clear:both;"></div>

<div id="footer" style="height:100px;background-color:pink;">

</div>

footer清除一下浮动就行了。

需要在footer层前面清除浮动：
......
<div style="clear:both"></div>
<div id="footer" style="height:100px;background-color:pink;">

没错 谢谢各位！