div+css小疑问。

大家看一下这个left 和right 共同被一个#maincontainer  div包裹。
代码如下。

   #left

        {

            background: #eee;

            width: 350px;

            height: 400px;

            float: left;

        }

        #right

        {

            background: #ccc;

            width: 150px;

            height: 400px;

            float: right;

        }

        #maincontainer

        {

            width: 500px;

            overflow: auto;

            

        }

        #foot

        {

            background: #eee;

            width: 500px;

            height: 100px;

        }

运行起来是没有问题的  “这里为什么出现？” 是没有的。

但是为什么设计页面中要空出这一块呢？ 我并没有设置#maincontainer的height。
也没有任何的边框。为什么出现那一块了呢？ 运行起来却没有问题。看着真别扭。
求大神帮解答。
------解决方案--------------------
测试了IE7、8、9、10和chrome，在IE7中出现这种现象，正在找解决方式。
------解决方案--------------------