How to Stop a CSS Layout from Distorting When Zooming In/Out

How do I stop a CSS layout from distorting when zooming in/out?

As this question still gets constant views, I'll post the solution I use currently.

CSS Media Queries:

@media screen and (max-width: 320px) { 

/*Write your css here*/

}

@media screen and (max-width: 800px) { 

}

Check out:
CSS-Tricks + device sizes and Media Queries

html layout messed up when i zoom in or out

The reason that it's broken the layout like that is because you're using percentages so that means when you're changing the zoom level the widths are being altered to fit the new size of the page which is what is meant to happen.

Changing your CSS to be fixed to a certain degree will help remedy this issue but won't fully fix everything because of how it's currently working. I'd suggest as a good starting point that you change the container max-width to something suitable for the design to begin with.

#container {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
}

However, you can then use media queries to change the width of the container depending on the screen size which will respond to the page size appropriately. For example, when the screen size becomes smaller to a tablet or mobile, you could do this (as an example).

@media screen and (max-width: 1024px) {

    #container {
        max-width: 960px;
    }

}

How do I deal with the issue of my divs being distorted greatly when zoomed in?

to do that you have to assign a value to the width or container width of the div. like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<style>
body{
        font-size:36px;
        font-family:Arial, Helvetica, sans-serif;
        }
.mega_cont{
    margin:0 auto;
    padding-top:10%;
    width:710px;
    }
.super_cont_lhs{
    float:left;
    width:300px;
    margin-right:5px;
    }

.cont1{
    width:100%;
    float:left;
    height:auto;
    background-color:#000;
    margin-bottom:10px;
    color:#CCC;
    }
.cont2{
    width:100%;
    float:left;
    height:auto;
    background-color:#000;
    color:#CCC;
    }
.super_cont_rhs{
    width:400px;
    float:left;
    height:auto;
    background-color:#F60;
    }
</style>
</head>

<body>

<div class="mega_cont">
<div class="super_cont_lhs">
    <div class="cont1">P - S P E C T R A</div>
    <div class="cont2">B E G I N</div>
</div>
<div class="super_cont_rhs">
P-Spectra enables practicing engineers to design seismic retrofit solutions with supplemental dampers using performance based design. 
</div>
</div>
</body>
</html>

Zooming Distortation

try using max-width and min-width property for your layout in CSS

How to make two elements intact on zoom level change?

You first need to wrap the content in a containing DIV

HTML

  <div class="site-content">
      <div id="header">            
        <img class="logo" src="./style/logo.jpg" width= 895 height="160">         
      </div>
    <div id="container-border">           
    </div>
  </div>

Note the new DIV .site-content. This is where you would center the website content and control the website contents width.

Here's my codepen: https://codepen.io/arlcode/pen/aRpWZo

I would also recommend not using static width/height for mobile dynamic purpose. You're also going to want to use classes more then ID's because ID's are specific but classes allow you to manipulate multiple DIVs at once.

Zoom changes the design layout

My best guess for why is that this is due to rounding errors as it scales down. For example if you imagine a box which is 250px wide and contains two boxes side by side that are 125px wide each. Clearly these fit side by side. If you zoom out so that you are at half size then the outer box will be 125px and the inner ones 62.5px each which rounds up to 63px half pixels are as small as you get). These two now come to a total width of 126px so no longer fit side by side and one would have to go under the other.

This is basically the principle you have at work here I think. The best solution that I can see would be to make the two side by side boxes narrower and float one to the right so that your right border is unbroken. this may mean a slightly bigger gap down the middle but that gap can hopefully absorb rounding errors as you zoom out...

Edit:

As you have noted the borders are the main thing causing confusion. They can be taken off of the outer containers and put on a nested container designed just to add borders.

http://jsfiddle.net/chrisvenus/pdQrQ/6/

The above is a fiddle (based on yours) which creates inner DIV tags that contain the border while the floated containers have no border at all. This now seems robust enough to work in IE8, FF7.0.1 or Chrome 14.0.835.202.

The things changed were adding the div to the HTML and swapping some classes around between it and its parent. There was a new innercontainer class that sets the height and width to 100% to ensure it fills the containing box (and thus the borders are where they are wanted. Also I changed the width of the bottom box so that it lined up correctly.

Let me know if this does you.