响应式设计bug

Question

在尝试为新的响应式布局网页设计创建模板时，我真的非常渴望DIV元素定位错误。

网址为：http://cs.renault-club.cz/responsive_005_bug.php

问题：当您将窗口大小调整为小于800px时，＆＃34; sidebar_right＆＃34; （在线用户）DIV元素不直接显示在＆＃34; obsah＆＃34; （内容）DIV，但在＆＃34; sidebar_left＆＃34;下反弹; （菜单）DIV元素。

请帮助！我花了2个小时尝试任何事情，但没有任何成功:(

在不到500px的情况下，它工作正常，大于800px。当前窗口宽度显示在左上角。

Answer 1

您有2个媒体查询导致其下推：如果您删除此

@media screen and (max-width: 800px)
#obsah {
    width: 80%;
}

并删除此

@media screen and (max-width: 800px)
#sidebar_right {
    width: 50%; 
}

它将如下所示工作：

Answer 2

好吧，在500和800px之间#sidebar_right有50％的含义 - 这太多了，不适合其他元素（看起来这是内联定义的，在顶部的style标签中该页面）

Answer 3

这不是一个错误。这是盒子模型的工作原理。尝试：

#sidebar_left { float:left; }