title: Layout changes when I switch resolution
body: <p>I'm making a website (in Dutch) and I work on a laptop with a external screen. The external screen has another resolution then my laptop screen so the site comes out distorted when viewed on the other screen. How do I fix this?</p>
  
  <pre><code>&lt;!DOCTYPE HTML&gt;
  
  &lt;html&gt;
  
  &lt;head&gt;  &lt;style type="text/css"&gt;
  
  body {
      background-color: #D8D8D8;
  }
  nav {
  /* Dit is voor de menubalk bovenin. */
  position: relative;
  background-color: black;
  width: 100%;
  height: 110px;
  top: -16px;
  left: -7.8px;
  padding: 8px;
  }
  .menutekst1 {
  position: relative;
  width: 150px;
  display: inline;
  border-color: white;
  color: white;
  list-style-type: none;
  float: right;
  font-size: 39px;
  top: 10px;
  right: 40px;
  font-family: verdana;
  
  }
  .menutekst2 {
  position: relative;
  display: inline;
  border-color: white;
  color: white;
  list-style-type: none;
  float: right;
  font-size: 39px;
  top: 10px;
  right: 25px;
  font-family: verdana;
  }
  .menutekst3 {
  position: relative;
  display: inline;
  border-color: white;
  color: white;
  list-style-type: none;
  float: right;
  font-size: 39px;
  top: 10px;
  right: 50px;
  font-family: verdana;
  }
  .menutekst4 {
  position: relative;
  display: inline;
  border-color: white;
  color: white;
  list-style-type: none;
  float: right;
  font-size: 39px;
  top: 10px;
  font-family: verdana;
  }
  #logo {
  /* Dit is voor het logo rechts bovenin. */
  position: absolute;
  top: 30px;
  left: 0px;
  width: 300px;
  }
  #facebook {
  /* Dit is voor het Facebook logo rechts bovenin. */
  position: absolute;
  top: 30px;
  left: 320px;
  width: 70px;
  }
  #hometekst {
  /* Dit is voor de tekst op de home pagina. */
  position: relative;
  text-align: center;
  font-size: 20px;
  font-family: Verdana;
  }
  #home1 {
  position: relative;
  display: inline;
  width: 250px;
  height: 161px;
  float: left;
  left: 0px;
  /* left: 40px; */
  }
  #home2 {
  position: relative;
  display: inline;
  width: 320px;
  height: 161px;
  float: right;
  left: px;
  right: 250px; */
  }
  #home3 {
  position: relative;
  display: inline;
  width: 250px;
  height: 161px;
  float: right;
  /* right: 50px; */
  }
  
  &lt;/style&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
  
  &lt;nav&gt;
      &lt;ul&gt;
          &lt;img id="logo" src="Foto/logoalgemeen.png" /&gt;
  
          &lt;a href="https://www.facebook.com/pages/Ve-screen-Ve-woning-en-scheepsstoffering/369675879764436?fref=ts" target="_blank" title="Facebook"&gt;&lt;img id="facebook" src="Foto/facebookalgemeen.png" /&gt;&lt;/a&gt;
  
          &lt;div class="menutekst4"&gt;&lt;li&gt;Contact &lt;/li&gt;&lt;/div&gt;
          &lt;div class="menutekst2"&gt;&lt;li&gt;Wat doen wij  &lt;/li&gt;&lt;/div&gt;
          &lt;div class="menutekst3"&gt;&lt;li&gt;Producten&lt;/li&gt;&lt;/div&gt;
          &lt;div class="menutekst1"&gt;&lt;li&gt;Home&lt;/li&gt;&lt;/div&gt;
  
      &lt;/ul&gt;
  &lt;/nav&gt;
  
  &lt;p id="hometekst"&gt;
  
      &lt;strong&gt;Welkom bij VE-Screen&lt;/strong&gt;&lt;br&gt;
      Ve-stoffering is een betrouwbare partner, denkt met u mee&lt;br&gt;
      en weet wat kwaliteit is of het nu gaat om uw woning, schip&lt;br&gt;
      of kantoor.&lt;br&gt;
      Onze kracht is de ervaring en goede samenwerking met u&lt;br&gt;
      als klant, de interieurbouwers en andere aannemers zodat&lt;br&gt;
      alles perfect op elkaar afgestemd en opgeleverd wordt.&lt;br&gt;
      Desgewenst incl. stoffering van banken, het leveren van&lt;br&gt;
      matrassen en bedtextiel en natuurlijk het plaatsen van ons&lt;br&gt;
      eigen Ve-screen zonwering.
  &lt;/p&gt;
  
  &lt;img id="home3" src="Foto/home3.png" /&gt;
  &lt;img id="home2" src="Foto/home2.png" /&gt;
  &lt;img id="home1" src="Foto/home1.png" /&gt;
  
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>