最后在最外面的容器 container3 上添加
overflow:hidden，砍去超出容器的部分。
相对定位的 CSS
下面是增加了相对定位和溢出的 CSS 规则。请注意 container3 上额外的
position:relative; 这是为了解决一个 IE bug ，阻止
overflow:hidden;工作。
#container3 {
float:left;
width:100%;
background:green;
overflow:hidden;
position:relative;
}
#container2 {
float:left;
width:100%;
background:yellow;
position:relative;
right:30%;
}
#container1 {
float:left;
width:100%;
background:red;
position:relative;
right:40%;
}
#col1 {
float:left;
width:30%;
position:relative;
left:70%;
}
#col2 {
float:left;
width:40%;
position:relative;
left:70%;
}
#col3 {
float:left;
width:30%;
position:relative;
left:70%;
}对列增加 padding
最后还需对列增加 padding，这样每列边缘的文字不至于显得拥挤。如果我们增加 padding，一些浏览器中可能正常显示，但不是所有。IE 错误的盒模型，导致其估算拥有 padding 的元素宽度异常。一个 200px 宽 20px padding 的 box 在 IE 中被视为 200px 宽，在其他浏览器中则为正确的 240px。padding 应该加在元素的宽度上。凸微软！
不过不用担心…我们可以用完全不依赖于 padding 的方法来解决这个问题。相反，我们把列弄窄一点（列宽减去两侧的 padding），之后用相对定位把它们移至正确的位置。在我们的例子中我们用了 2% 的 padding，则 30% 的列将减至 26%，40% 的列减至 36%。用相对定位移回列时需谨记，现在列变窄了，所以当它们一起像最初那样左浮动时，每一个需要比上一个移动更远的距离。
完整的CSS
为了使布局保持在小宽度我在每个内容列增加了
overflow:hidden; 这将切去超出列宽的东东，并阻止其干扰其他布局。重申一下，这只是 IE 的问题，其他所有浏览器会保持正确的布局，不管列内是虾米。如果你真想这样做，可以用 IE 条件注释只对 IE 写规则。
#container3 {
float:left;
width:100%;
background:green;
overflow:hidden;
position:relative;
