css - HTML/CSS 中的重叠 div

Question

我的网站 html/css 代码需要一些帮助。该网站看起来不错(对我来说)，但是如果有人有一个 17"的小显示器，或者如果您放大网站，我的信息栏中的 div 会相互重叠并且看起来很糟糕。它很乱，抱歉，但我一直尝试我在网上找到的各种东西...我可以做些什么来改变这种重叠？

这是我的中间部分:

<div id="mac">
<div id="mapa"><script id="_waux4i">var _wau = _wau || [];
_wau.push(["map", "sdfsdfsdv", "d3d", "420", "210", "night", "default-red"]);
(function() {var s=document.createElement("script"); s.async=true;
s.src="http://widgets.amung.us/map.js";
document.getElementsByTagName("head")[0].appendChild(s);
})();</script>
</div>
<div id="qrcode"><img src="gallery/images/qrcode.png" width="600" height="86" /> </div>
</div> 

这是左边的 div:

<div id="instagram"> some instagram iframe code</div>

右边的div:

<div id="social">
<div id="social_buttons">Some rollover buttons</div> 
</div>

CSS 代码，对他们来说是:

#social_buttons{
float:right;
padding-right:20px;
padding-top:320px;
}

#social {
float:right;
width:370px;
height:350px;
background:url(gallery/images/pic.png) no-repeat;
margin-top:70px;
position:relative;
right:10px;
display: block;
}

#instagram {
float:left;
height:350px;
width:437px;
margin-left:35px;
margin-top:30px;
display: block;
}

#mapa {
height:220px;
padding-left:100px;
padding-top:100px;
background:url(gallery/images/mac.png) no-repeat;
 }

 #qrcode{
margin-top:100px;
position:absolute;
width:619px;
 }

 #mac {
margin:0 auto;
height:500px;
background:url(gallery/images/mac.png) no-repeat;
min-width:619px;
    width:619px;
    display: block;
}

Answer 1

使用媒体查询..寻求更多帮助..阅读然后申请，这样它就会响应，所以它不会重叠

http://www.w3.org/TR/css3-mediaqueries/