由于我不善于解释，所以我画了几张照片。
我目前有以下代码
<header style="height: 280px;">
<div id="topmenu" style="height: 70px; width: auto; margin-top: 217px;">
<ul><li>home</li><li>page</li><li>contact</li><li>more</li><li>more</li></ul>
advert
</div>
</header>
<div id="leftnav" style="float: left; width:200px;">
<center>menu here</center>
</div>
<div id="rightnav" style="float: right; width:200px;">
menu here
</div>
<div id="content" style="margin-left: 276px; margin-right: 260px;">
content
</div>
看起来像这样：
但是在移动设备或较小的屏幕上，或者当我添加更多菜单项时，由于没有足够的空间并且与内容div重叠，因此广告被推出，如下所示：
但是我想要它做的是将内容div向下推，这样它就不会重叠，就像这样：
如何修改html / css以在较小的屏幕上正确显示广告？
最小宽度不是一个选择。
最佳答案
如果假设您使用的是不同的代理（例如移动设备或平板电脑），那么您会有所不同。您会发现，大多数网站（如orkut，facebook，gmail ect ...）都有移动版网站和触摸版网站。制作这些网站以适合用户屏幕。同样，您必须对网站进行编码以适合用户代理。
阅读此link和此link。现在，您必须为移动和其他此类代理创建一个单独的页面。并将用户重定向到移动版本的网站。
对于不同的计算机屏幕尺寸，可以使用%或em形式的宽度和高度。那行得通。屏幕尺寸是动态的，%或em可以根据动态屏幕尺寸来映射对象。
尝试一下，也许可以。
代替
#main:
{
width:270px;
height:300px;
}
用这个：
#main:
{
width:40%;
height:60%
}
您会找到更好的解释here。
了解有关cross browser compatibility的信息。这也是一个很好的link for cross browser compatibility。