发放三个div的问题;第三个div以某种方式影响整个页面

Question

我连续有三个div，最终将包含三个“小部件”（日历，YouTube播放列表和音频播客）。当我向前两个DIV应用30％的宽度时，一切正常，但是当我对第三个DIV应用任何宽度时，它会导致整个页面向左移动，（绝对位置左：0）。此外，添加到.widgets中包含的DIV的任何填充似乎都会影响页面。为什么这些DIV，特别是第三个，造成这么多麻烦？我应该如何实现我在纸上的设计（在SkyDrive链接中）？

JSFiddle for the results... SkyDrive folder for screenshots and wireframe

Answer 1

我根据要求更改了部分代码，并查看了更新后的Fiddle。

更新了CSS代码

.events {
    background: red;
    float:left;
    width:33%;

}
.youtube {
    background: green;
    float:left;
    width:31%;
    margin-left:10px;
    margin-right:10px;

}
.audio {
    background: white;
    float:left;
        width:33%;
}