HTML Elements get misplaced when zoomed in

Question

When I try to zoom in to my HTML page, the elements such as Divs get misplaced as if it is 'trying to be responsive' instead of being fixed to their original positions.

To further demonstrate the problem, here's a Codepen of my layout. Try to zoom in and zoom out on the page. Notice how the positions of the Columns 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 to fix all the Div columns to their exact positions to make sure that it stays intact when a user zooms in (Perfect examples: Facebook, Stackoverflow doesn't get affected when zoomed in)

Can you guys checkout my Codepen and suggest me a solution?

Answer 1

As your columns' width is set by using px as units, the wrapper's width should be set that way as well. Try changing the max-width of the wrapper to min-width like this:

min-width: 1349px;

Also, the green boxes' position should not be set to fixed. Remove the fixed attribute in .fixed-container-inside-column .

Finally, if you do not want the last two columns to adapt to the window size, you should set their float to left as well:

 .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 ;
}

By doing so, your sketch behaved as expected when zooming in and changing browser window size.