HTML elements become inappropriate when zoomed in

Question

When I try to zoom in on my HTML page, elements like Divs get lost as if they are “trying to be responsive” rather than being fixed to their original position.

To demonstrate the problem, here is the Codepen of my layout . Try zooming in and out of the page. Notice how the column positions change.

HTML

<main class="wrapper">  <!--Main Content Starts here-->

<div class="column-one">
    <div class="fixed-container-inside-column">
    </div>
  </div>

  <div class="column-two">
  </div>

  <div class="column-three">
    <div class="fixed-container-inside-column">
    </div>
  </div>

  <div class="column-four">
    <div class="fixed-container-inside-column">
    </div>
  </div>

</main> <!--Main Content Ends here-->

CSS

.wrapper{
    position: relative;
    overflow: hidden;
    width: 100%;
    margin: 0 auto;
    display: block;
    max-width: 1349px;
    padding-top: 60px;
    padding-bottom: 40px;

    -webkit-box-sizing : border-box;‌​
    -moz-box-sizing : border-box;
    box-sizing : border-box;

    -webkit-transition-duration: all 0.4s ease-in-out;
    -moz-transition-duration: all 0.4s ease-in-out;
    -o-transition-duration: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
  }

  .column-one{
    position: relative;
    display: block;
    float: left;
    width: 230px;
    height: 500px;
    margin-left: 20px;
    background-color: red;
  }

  .column-two{
    position: relative;
    float: left;
    width: 500px;
    height: 100%;
    min-height: 2500px;
    margin-left: 35px;
    background-color: blue ;
  }

  .column-three{
    position: relative;
    float: right;
    width: 240px;
    height: 100%;
    min-height: 500px;
    margin-right: 20px;
    background-color: red;
  }

  .column-four{
    position: relative;
    float: right;
    width: 250px;
    height: 100%;
    min-height: 500px;
    margin-right: 20px;
    background-color: blue ;
  }

  .fixed-container-inside-column{
    position: fixed;
    display: block;
    width: 200px;
    height: 400px;
    margin: 15px;
    background-color: green;
  }

I want all columns of the Div to be fixed to their exact positions, to make sure it stays the same as the user approaches (Ideal examples: Facebook , Stackoverflow doesn't change when zoomed in)

, , Codepen ?

Answer 1

px , ​​ . min-width :

min-width: 1349px;

, . .fixed-container-inside-column.

, , , float :

 .column-three{
  position: relative;
  float: left;
  width: 240px;
  height: 100%;
  min-height: 500px;
  margin-left: 20px;
  background-color: red;
}

.column-four{
  position: relative;
  float: left;
  width: 250px;
  height: 100%;
  min-height: 500px;
  margin-left: 20px;
  background-color: blue ;
}

, , , .

Answer 2

:

.wrapper {
//width: 100%; to
width: 1349px;
}

      .wrapper{
    position: relative;
    overflow: hidden;
    margin: 0 auto;
    display: block;
    max-width: 1349px;
    width: 100%;
    padding-top: 60px;
    padding-bottom: 40px;

    -webkit-box-sizing : border-box;‌​
    -moz-box-sizing : border-box;
    box-sizing : border-box;

    -webkit-transition-duration: all 0.4s ease-in-out;
    -moz-transition-duration: all 0.4s ease-in-out;
    -o-transition-duration: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
  }

  .column-one{
    position: relative;
    display: block;
    float: left;
    width: 18%;
    height: 500px;
    margin-left: 2%;
    background-color: red;
  }

  .column-two{
    position: relative;
    float: left;
    width: 38%;
    height: 100%;
    min-height: 2500px;
    margin-left: 2%;
    background-color: blue ;
  }

  .column-three{
    position: relative;
    float: left;
    width: 18%;
    height: 100%;
    min-height: 500px;
    margin-left: 2%;
    background-color: red;
  }

  .column-four{
    position: relative;
    float: left;
    width: 18%;
    height: 100%;
    min-height: 500px;
    margin-left: 2%;
    background-color: blue ;
  }

  .fixed-container-inside-column{
    position: fixed;
    display: block;
    width: 14%;
    height: 400px;
    margin:2%;
    background-color: green;
  }

http://codepen.io/anon/pen/WQLQpm?editors=010

Answer 3

css

:

position: relative;
float: left;

, , . , , , .

px. px

width: 100% , . "px" , . , , .

Answer 4

If scaling is not required, you can turn off scaling for the mobile user using

<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />

Link for your help how-can-i-disable-zoom-on-a-mobile-web-page