Currently, I have set up three div elements to display side by side. Everything looks good at normal screen size, but when zooming in or out, the content inside the div elements gets distorted. The text shrinks and images get cut off as the size of the image is affected by further zooming. I want to prevent this issue so that the content remains intact even when zoomed. I tried using overflow: scroll for the body, but it doesn't show a scroll bar during zooming. I believe having a scroll bar would help maintain the integrity of the content inside the div elements.
Check out this jsfiddle to see the problem in action
<div id='container' style='width:100%;'>
<div class='left' style='height:20px;width:21%;float:left;border:1px solid black;box-sizing: border-box;height:200px;'>
</div>
<div class='center' style='height:20px;width:56%;float:left;border:1px solid blue;box-sizing: border-box;height:200px;'>
</div>
<div class='right' style='height:20px;width:23%;float:right;border:1px solid red;box-sizing: border-box;height:200px;'>
</div>
</div>