Html DIV一直折叠到下面的行

我在一个主容器里有两个div。一个在左侧浮动（youtube视频），另一个在右侧浮动（soundcloud播放器）

当我放大（110%）时，右边的div容器会在下面折叠到下一行

我怎样才能阻止这种事情发生？我在CSS中遗漏了什么吗

.youtube {
    float: left;
    width: 640px;
    height: 360px;
}
.maincontainer {
    position:relative;
    margin-top: 1%;
    margin-right: auto;
    margin-left: auto;
    max-width: 1900px;
    height: 1000px;
    padding-right: 10px;
    padding-left: 10px;
}
.soundcloud {
    float:right;
    height:388px;
    width:580px;
    padding-right:50px;
}

jsfiddle：

谢谢

编辑：找到了答案。我在.maincontainer分区中使用了“max width”。我将其更改为使用了“width”，现在soundcloud播放器不再下降到下一行。这就解决了

这就引出了另一个问题：我如何知道是使用%还是px来定义div的维度？人们给了我相互矛盾的答案，这让我很困惑。。。

---

我个人发现，使用像素有助于框保持原位，在放大或缩小时不会漂移。

添加CSS重置，包括放置：

* {
   margin:0;
   padding 0;
}

在CSS文件的顶部。这将重置所有边距和填充

如果这不起作用，试着制作包含整个站点中间部分（youtube视频和文本以及soundcloud框）的div，我想你把它称为主容器，稍微大一点。在宽度上加上10-15个像素。可能是空间不够了

---

希望这有帮助。下次尝试发布更多信息，特别是一些代码：）

请在此处添加有意义的代码和问题描述。不要只链接到需要修复的站点——否则，一旦问题解决，这个问题将对未来的访问者失去任何价值。发布一个能证明你的问题的帖子会帮助你得到更好的答案。有关更多信息，请参阅“谢谢！”！对于这类站点，我建议使用像素而不是百分比。