{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 在下西门庆 的问题《browser zoom out breaks page layout》','https://www.manongdao.com/q-739179.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
I am having trouble when i zoom out my page in browser.
this is a simple page, body has a width of 970px, and devided into 2 parts, left and right. Left one is 300px and float to left with margin-right 10px, right one is 660px, and float right. This is ok when i zoom in or zoom out.
but when i change left width to 298px, and add right width to 658px, add 1px border to both parts, though it is ok in normal size, but when i zoom out(ctrl+ mouse wheel down) to 90%, the right part drop down and breaks the layout. You can see here for detail:jsfiddle
<body>
<style>
</style>
<div id='left'>left</div>
<div id='right'>right</div>
</body>
To give your layout some flexibility, use percentage widths for your divs and float left and right as suggested in previous answers, but do not set a margin. Allow the margin to be the space left over. Using exact widths or percentage values that add up exactly 100% there is a risk the layout will break in one or more browser for reasons explained by Shomz.
The space between the two elements will be a the same as a 5% margin, and less likely to break.
HTML doesn't like to work with decimal pixel numbers and that's exactly what happens when you zoom - all the pixel sizes get internally divided or multiplied (though multiplication isn't really a problem).
Think about it, how should it represent 268.2 pixels? It gets rounded. So if you have many of those not-divisible elements, you're bound to lose some pixels and that causes the layout to break. Also, that's why some zoom percentages work better than the others.