title: Html5 with CSS elements move when zooming
body: <p>Hi guys this might be a easy question but I'm struggling a bit with this one problem in my HTML and CSS page.</p>
  
  <p>Problem: When i zoom int the "Section" part moves under the nav and when i zoom out the footer moves next to the section part.....</p>
  
  <p>Here is the sample of my HTML page:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  
  &lt;html&gt;
  
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;title&gt;MyWebsite&lt;/title&gt;
      &lt;link rel="stylesheet" type="text/css" href="css/style.css"&gt;
  
  &lt;/head&gt;
  
  &lt;header&gt;
     Header
    &lt;/header&gt;
  
  
  &lt;body&gt;
  
  
  
    &lt;nav&gt;
        &lt;ul&gt;
            &lt;li&gt;
               Tab1 
            &lt;/li&gt;
            &lt;li&gt;
              Tab2 
            &lt;/li&gt;
            &lt;li&gt;
               Tab3 
            &lt;/li&gt;
            &lt;li&gt;
               Tab4 
            &lt;/li&gt;
            &lt;li&gt;
               Tab5
            &lt;/li&gt;
  
  
        &lt;/ul&gt;
    &lt;/nav&gt;
  
  
  
    &lt;section id=""&gt;
   Section
    &lt;/section&gt;
  
    &lt;footer&gt;
    Footer
    &lt;/footer&gt;
  
  
  
  &lt;/body&gt;
  
  
  &lt;/html&gt;`
  </code></pre>
  
  <p>here is the CSS page:</p>
  
  <pre><code>header
  {
      width: 1325px;
      height: 150px;
      background-color: green;
      position: relative;
  }
  
  nav
  {
      position: relative;
      width: 400px;
      height:  500px;
      background-color: teal;
      float: left;
      overflow: hidden;
  }
  
  section
  {
      position: relative;
      float: left;
      width: 925px;
      height: 500px;
      background-color: blue;
  }
  
  footer
  {
        float: left;
      width: 1325px;
      height: 50px;
      background-color: lime;
      position: relative;
      overflow: hidden;    
  }
  </code></pre>
  
  <p>thanks for your help and time in advance</p>