HTML/CSS重叠div 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 id="instagram"> some instagram iframe code</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

使用媒体查询.. 更多help..read再申请，因此将b响应所以它不会重叠

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

Answer 2

首先，我会建议将您的div大小从px更改为％。这种方式应该在屏幕尺寸变化时进行缩放。这不是最好的选择，因为它会改变你的div的缩放比例，并可能扭曲你的内容。看到这个答案为更多的选择：https://stackoverflow.com/a/19385846/2990189

Answer 3

这是悲剧，在你的CSS使用“PX”，所以做出较小视使用％你的代码工作的良好分配的价值属性

让我们进入不同的单位a）Em：由于可扩展性和移动设备友好性，在Web文档中越来越流行。 b）像素：许多网页设计师在网页文件中使用像素单位，以便在浏览器中呈现网站时产生像素完美的网站表示。像素单元存在的一个问题是，对于视觉受损的阅读器，它不会向上扩展，或者向下扩展以适应移动设备。 c）积分：点与像素非常相似，因为它们是固定大小的单位，不能按比例缩放。

d）在使用百分比单位时，您的文本对于移动设备和可访问性保持完全可扩展。

所以什么不同的是

与设备PX内要始终Portablity吮吸..所以它的时间在你的CSS朝％至移动

Answer 4

显示更改为inline-block的上#MAC#instagram和#social

display:inline-block;