菜鸟求解，div错位问题
本人菜鸟，第一次做网站，就遇到好多问题，头疼
想实现一个三个div并排，也实现了，但是还是有很多问题。
#all {margin:0 auto; width:80%;}
#left {
  float: left;
  width:30%
height:300px;
  background-color: red;
}
#right {
  float: right;
  width: 30%;
height:300px;
  background-color: green;
}
#middle {
float:left; 
margin-left:5%;
width: 30%;
height:300px; 
}

html代码是这样的
<div id=all>
  <div id=left></div>
  <div id=middle></div>
  <div id=right></div>
</div>

这样也实现了，但是放大缩写的时候会发生div错位现象。
我试着把80%改成固定的数值，如1024px，在iE中显示正常，但是在谷歌浏览器只显示三分之一的大小，请问各位大神如何解决

------解决方案--------------------
建议都用精确的像素控制！！
------解决方案--------------------
float:left;
margin-left:5%;

这里的margin-left 在IE6下会双倍边距，加一行display:inline即可。其他地方无问题~ 如果你没用边框或者padding等那总宽度是正好的，即时双倍了也不会出现错位~
------解决方案--------------------
最好用像素（px）精确，用float后再IE6下回产生双倍距离（float:left;margin-left:5%;），可以用css hack解决，用“_”控制IE6的margin-left：；的值。