CSS-之外围容器自适应高度

css|自适应

 今天我在给客户制作网页（设计是采用xhtml+css）的时候遇到了这个问题，就是给外围容器左右加border，在IE下可以正常显示，FF下有的页面正常，有的就没有，产生的原因是不能自适应高度。

问题：
<div id="main">
<div id="sideleft">left</div>
<div id-"sideright">right</div>
</div>#main容器在非IE下不能很好的适应left和right的高度！

我的解决方案是：

我原来的：#mainContent {width:760px; height:100%; margin:2px auto 0 auto;padding:0; background-color:#fff; border-right:#eee 1px solid; border-left:#eee 1px solid;}

第一步修改：
加上 min-height:auto; max-height:100%;两句，没效果

第二步修改：
加上
#mainContent:after {content: '[DO NOT LEAVE IT IS NOT REAL]'; display: block; height: 0;clear: both; visibility: hidden;}
#mainContent {display: inline-block;}
/*\*/
#mainContent {display: block;}

效果实现了，达到了我的要求，而且兼容IE，FF，OPERA

其实最简单的方法是这样的
<div id="main">
<div id="sideleft">left</div>
<div id-"sideright">right</div>
<div style="clear:both;"></div>
</div>
只要清除了浮动就可以让外围容器的背景延伸了