title: CSS layout zoom issue
body: <p>My issue is that when I zoom in or out of the page (in all the browsers I tried), only some parts of it are displayed as zoomed (the contents that are in the divs, but not the divs themselves). I put the borders to show it easily.</p>
  
  <p>When I searched for a solution, all of them mentioned that it is because of fixed width values by using pixels (px). So, I used <code>%</code> when putting values to width and height; but still, the issue remains...</p>
  
  <p><strong>Here are some screenshots to illustrate my problem:</strong></p>
  
  <p><strong>When zoomed-in:</strong></p>
  
  <p><img src="https://i.stack.imgur.com/gXZtD.jpg" alt="zoomed-in"></p>
  
  <p><strong>When zoomed-out:</strong></p>
  
  <p><img src="https://i.stack.imgur.com/CIE7W.jpg" alt="zoomed-out"></p>
  
  <p><strong>Here is my code:</strong></p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;html&gt;
      &lt;head&gt;
          &lt;link href="style.css" type="text/css" rel="stylesheet"/&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div id="title_bar"&gt;
              some txt here
              &lt;div id="title_img"&gt;&lt;/div&gt;
  
              &lt;div id="title_txt"&gt;&lt;/div&gt;
  
              &lt;div id="menu_navigation"&gt;&lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div id="title_bar_2"&gt;
              some txt here
          &lt;/div&gt;
  
          &lt;div id="container_columns"&gt;
              &lt;div id="column_1"&gt;
                  &lt;span id="column_1_content"&gt;some txt here&lt;/span&gt;
              &lt;/div&gt;
              &lt;div id="column_2"&gt;
                  &lt;span id="column_2_content"&gt;some txt here&lt;/span&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>html body
  {
      margin: 0;
      width: 100%;
      height: 100%;
      background-color:#f2f2f2;
  }
  
  div#title_bar
  {
      height:4%;
      width:76%;
      margin:auto;
      margin-top:4%;
      border-style:solid;
      border-color:blue;
  }
  
  div#title_bar_2
  {
      text-align:center;
      height:44%;
      width:76%;
      margin:auto;
      margin-top:2%;
      border-style:solid;
      border-color:blue;
  }
  
  div#title_bar img
  {
      margin-top:1%;
      float:left;
  }
  
  div#title_txt
  {
      float:left;
      margin-left:2%;
      margin-top:1.4%;
      font-style: italic;
      font-family:verdana;
      font-size: 16px;
  }
  
  div#menu_navigation
  {
      float:left;
      margin-left:35%;
      margin-top:1.4%;
      font-size:19px;
  }
  
  div#container_columns
  {
      margin:auto;
      width:76.5%;
      margin-top:2%;
      height:27%;
      border-style:solid;
      border-color:blue;
  }
  
  div#column_1
  {
      height:100%;
      width:49%;
      float:left;
      border-style:solid;
      border-color:blue;
  }
  
  div#column_2
  {
      margin-left:1%;
      width:48%;
      float:left;
      height:100%;
  }
  </code></pre>