div+css布局错乱问题解决方法

Question

在div+css布局时，使用dreamweaver预览时没有任何问题，但是上传的网页空间后就出现问题了，使用div+css布局出现了错乱。
例如：
<div id=“box”>
<div id=“lift”>这里是页面的左部分内容</div>
<div id=“right”>这里是页面的右部分内容</div>
<div id=“foot”>这里是放页尾的版权信息等的</div>
</div>
三个div均设置了宽度以及高度，并且用一个大的div=id“box”框起来了

希望，“lift”和“right”在一横排，“foot”在两个div的下面，
“lift”和“right”的高度是不同的，但希望“foot”能够在较高的那个div之下,并能够随着高度的调整自动的调整。
错乱的结果：“foot”在“lift”“right”的后面，被他们挡着了。
请问有什么办法解决这个问题吗？

Answer 1

div是一种分块机制，这就要求在设计页面时要弄清各块之间级联关系
这个问题需要把left和right再使用一个div包含起来，直接上代码啦，下边就可以实现你要求的布局。foot总在下边，并能随着left，right的高度改变自动调整。
<div id="box">
<div id="content">
<div id="left">这里是页面的左部分内容</div>
<div id="right">这里是页面的右部分内容</div>
</div>
<div id="foot">这里是放页尾的版权信息等的</div>
</div>

/******css样式**/
<style type="text/css">
#content{
width: 100%;
background: aqua;
overflow: auto;
}
#left{
width:50%;
float: left;
height:250px;
background: blue;
}

#right{
width:50%;
float: right;
height:100px;
background: fuchsia;
}
#foot{
height: 30px;
background: gray;
}
</style>

Answer 2

　　div+css布局错乱问题解决方法如下：
　　1、用CSS display:table-row属性来调试，发现者FireFox下正常了，但IE是不支持改属性的，用JS来做判断，然后做兼容。
　　2、另外一个很简单也很可行的方法，就是用display:''这个属性dispaly后面不加任何的东西，这样就兼容了Firefox和IE了。

Answer 3

宽度计算错误造成错位；解决方法：计算我们设置宽度、边框、paddind、margin之和。

浏览器问题造成错乱；解决方法尽量少使用margin属性，或者使用css hack。

你的问题，content DIV块中加入overflow: auto；left DIV块中加入 float: left；right DIV块中加入 float: right；

Answer 4

你在<div id=“foot”>这里是放页尾的版权信息等的</div>
的上面加上一个<div style=“clear:both”></div>清一下上面的浮动即可

Answer 5

用div把left和right包裹起来，如果还是老样子就在foot前面清除浮动