title: how do make my website resize automatically when the screen resolution changes?
body: <p>when i use my website on a resolution that is not 1920x1080 it zooms in so i have to scroll left and right to view the full content. how do i make the website resize to fit the resolution and display correctly.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;&lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta name="generator" content="CoffeeCup HTML Editor (www.coffeecup.com)"&gt;
      &lt;meta name="dcterms.created" content="Fri, 24 Oct 2014 20:29:09 GMT"&gt;
      &lt;meta name="viewport" content="width=device-width"&gt;
      &lt;meta name="description" content="The villages of East and West Runton are situated between Sheringham and Cromer on the North Norfolk Coast, UK"&gt;
      &lt;meta name="keywords" content="East Runton, West Runton, Sheringham, Cromer, North Norfolk Coast,UK, Village, England, Parish Council"&gt;
      &lt;title&gt;Home&lt;/title&gt;
   &lt;style&gt;
  
  body {
  width: auto;
  min-width: 10240px;
  height:100%;
  margin-left: 0 auto;
  margin-right: 0  auto;
  display: block;
  }
  &lt;/style&gt;
  
      &lt;!--[if IE]&gt;
      &lt;script src="http://html5shim.googlecode.com/svn/trunk/html5.js"&gt;&lt;/script&gt;
      &lt;![endif]--&gt;
   &lt;style&gt; 
   
  
  #cssmenu {
    background: #f96e5b;
    width: 1404px;
    margin-right:auto;
    margin-left:auto;
    padding:0;
  }
  #cssmenu ul {
    list-style: none;
    margin: 0%;
    padding: 0%;
    line-height: 1;
    display: block;
    zoom: 1;
    width:100%
  }
  #cssmenu ul:after {
    content: " ";
    display: block;
    font-size: 0%;
    height: 0%;
    clear: both;
    visibility: hidden;
  }
  #cssmenu ul li {
    display: inline-block;
    padding: 0%;
    margin: 0%;
  }
  #cssmenu.align-right ul li {
    float: right;
    
  }
  #cssmenu.align-center ul {
    text-align: center;
  }
  #cssmenu ul li a {
    color: #000000 ;
    text-decoration: none;
    display: block;
    padding: 15px 25px;
    font-family: 'Open Sans', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 14px;
    position: relative;
    -webkit-transition: color .25s;
    -moz-transition: color .25s;
    -ms-transition: color .25s;
    -o-transition: color .25s;
    transition: color .25s;
  }
  #cssmenu ul li a:hover {
    color: #333333;
  }
  #cssmenu ul li a:hover:before {
    width: 100%;
  }
  #cssmenu ul li a:after {
    content: "";
    display: block;
    position: absolute;
    right: -3px;
    top: 19px;
    height: 6px;
    width: 6px;
    background: #ffffff;
    opacity: .5;
  }
  #cssmenu ul li a:before {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
    height: 3px;
    width: 0;
    background: #333333;
    -webkit-transition: width .25s;
    -moz-transition: width .25s;
    -ms-transition: width .25s;
    -o-transition: width .25s;
    transition: width .25s;
  }
  #cssmenu ul li.last &gt; a:after,
  #cssmenu ul li:last-child &gt; a:after {
    display: none;
  }
  #cssmenu ul li.active a {
    color: #333333;
  }
  #cssmenu ul li.active a:before {
    width: 100%;
  }
  #cssmenu.align-right li.last &gt; a:after,
  #cssmenu.align-right li:last-child &gt; a:after {
    display: block;
  }
  #cssmenu.align-right li:first-child a:after {
    display: none;
  }
  @media screen and (max-width: 100%) {
    #cssmenu ul li {
      float: none;
      display: block;
    }
    #cssmenu ul li a {
      width: 100%;
      -moz-box-sizing: border-box;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      border-bottom: 1px solid #fb998c;
    }
    #cssmenu ul li.last &gt; a,
    #cssmenu ul li:last-child &gt; a {
      border: 0;
    }
    #cssmenu ul li a:after {
      display: none;
    }
    #cssmenu ul li a:before {
      display: none;
    }
  }
  &lt;/style&gt;
  
  &lt;style&gt;
  
  
  .heading1 {
  width:1400px;
  height:120px;
  margin-right:auto;
  margin-left:auto;
  padding:0;
  border: 4px solid #fb998c;
  }
  
  
   #box1 {
  width:1400px;
  height:1000px;
  margin-right:auto;
  margin-left:auto;
  padding:0;
  border: 4px solid #fb998c;
  }
  
  ul &gt; li
  { 
    display:block;
    position:relative;
    height:30px;
  }
  
  ul &gt; li .flyout_container
  {
    position:absolute;
    top:30px; /* this is the LI's height*/
    left:0;
    display:none;
  }
  
  ul &gt; li:hover .flyout_container
  {
    display:block;
  }
  
  
  
      #east_runton{ /* The following CSS rules are optional. */
    position: relative;
    overflow:hidden;
    height:120px;   
    margin-left:auto;
    margin-right:auto;
    float:left;
      }   
    
   
  
      #west_runton{ /* The following CSS rules are optional. */
    position: relative;
    overflow:hidden;
    height:120px;   
    margin-left:auto;
    margin-right:auto;
    float:right;
    margin-top: -101.51px;
   }
   
   #title {margin-right: 160px; 
   margin-top: 2.5%;}
     
     
     #menubar2 {
     width:400px;
     margin-left:auto; 
     margin-right:auto;
     }
     
     #subheading { font-size: 130%;
     font-weight:bold;}
     
  html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline;}
  /* HTML5 display-role reset for older browsers */article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block;}
  ol, ul { list-style: none;}blockquote, q { quotes: none;}blockquote:before, blockquote:after,q:before, q:after { content: ''; content: none;}table { border-collapse: collapse; border-spacing: 0;}
     
     #marqueetext {
      padding-top: 45px;
     }
     
     #marqueeimage {
      float: left;
     }
     
     #text2 {
      padding-left:20px;
      padding-right:20px;
     }
     
     #imgright {
      float:right;
     }
     
     #imgleft {
      float:left;
      padding-right: 5px;
      padding-top: 2px;
     }
     &lt;/style&gt;
  
  
      
    &lt;/head&gt;
    
    &lt;body&gt; 
   &lt;div class="heading1"&gt;
   
          &lt;div id="east_runton"&gt;
      &lt;img src="images/east_runton/1.jpg" height="120" alt="Slide 1" /&gt;
      &lt;img src="images/east_runton/2.jpg" height="120" alt="Slide 2" /&gt;
      &lt;img src="images/east_runton/3.jpg" height="120" alt="Slide 3" /&gt;    
      &lt;img src="images/east_runton/4.jpg" height="120" alt="Slide 4" /&gt;
             &lt;/div&gt;  
    &lt;script src="slideShow.js"&gt;&lt;/script&gt;
    
    &lt;div id="title"&gt;
    &lt;br /&gt;&lt;div style="margin-top: -100px" "margin-right: 40px"&gt; &lt;h1 id="heading" align="center"&gt;&lt;font color="black"&gt;&lt;font face="Century Gothic"&gt;&lt;font size="10"&gt;&lt;br /&gt;East and West Runton&lt;br /&gt; &lt;/font size&gt;&lt;/font color&gt;&lt;/h1&gt; 
      &lt;p id="subheading" align="center"&gt;&lt;font face="Century Gothic"&gt;&lt;b&gt;Welcome to East and West Runton's parish web site. East and West Runton are villages in North Norfolk.&lt;/b&gt;&lt;/p&gt; &lt;/div&gt; &lt;/font face&gt;
       &lt;/div&gt;       
       &lt;div id="west_runton"&gt;
      &lt;img src="images/west_runton/1.jpg" height="120" alt="Slide 1" /&gt;
      &lt;img src="images/west_runton/2.jpg" height="120" alt="Slide 2" /&gt;
      &lt;img src="images/west_runton/3.jpg" height="120" alt="Slide 3" /&gt;    
      &lt;img src="images/west_runton/4.jpg" height="120" alt="Slide 4" /&gt;
             &lt;/div&gt;  
    &lt;script src="slideShow2.js"&gt;&lt;/script&gt;
     
      &lt;/div&gt;
   
     
    
  &lt;br /&gt;
  &lt;div id='cssmenu'&gt;
  &lt;ul&gt;
    &lt;li class='active'&gt;
    &lt;li&gt;&lt;a href="index.html"&gt;Home&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="parish_council_information.html"&gt;Parish Council information&lt;/a&gt;
        &lt;div class="flyout_container"&gt;
        &lt;ul&gt;
          &lt;li&gt;&lt;a href="somepage_subpage"&gt;Parish council minutes&lt;/a&gt;
        &lt;/ul&gt;
        &lt;ul&gt;
          &lt;li&gt;&lt;a href="somepage_subpage"&gt;Agenda&lt;/a&gt;
        &lt;/ul&gt;
        &lt;ul&gt;
          &lt;li&gt;&lt;a href="somepage_subpage"&gt;Annual report&lt;/a&gt;
        &lt;/ul&gt;
        &lt;ul&gt;
          &lt;li&gt;&lt;a href="somepage_subpage"&gt;Publication scheme&lt;/a&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
    &lt;li&gt;&lt;a href="whats_on.html"&gt;What's on &lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="history.html"&gt;History&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="churches.html"&gt;Churches&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="churches.html"&gt;Newsletter&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="villiage_halls_and_social_clubs.html"&gt;Village Halls and Social Clubs&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="gallery.html"&gt;Gallery&lt;/a&gt;&lt;/li&gt;  
    &lt;div id="menubar2"&gt;
    &lt;li&gt;&lt;a href="business_in_runtons.html"&gt;Business in Runtons&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="contact_us.html"&gt;Contact us&lt;/a&gt;&lt;/li&gt;
   &lt;/div&gt;
  &lt;/ul&gt; 
  &lt;/div&gt;
  
  &lt;br /&gt;
  
  
  &lt;div id="box1"&gt;&lt;font face="Century Gothic"&gt;&lt;font size="+1"&gt;
  &lt;marquee&gt;&lt;img id="marqueeimage" src="images/quality_parish_council.jpg"&gt;&lt;div id="marqueetext"&gt;Provided by Runton Parish Council - Proud to be a Quality Council&lt;/div&gt;&lt;/marquee&gt;
  
  &lt;br /&gt;&lt;br /&gt;
  &lt;div id="text2"&gt; &lt;font size="+2"&gt;
  &lt;img src="images/countrywalks.jpg" alt="Country Walks, North Norfolk, UK" id="imgright" WIDTH="300" HEIGHT="225"&gt;&lt;p&gt;The
      villages of East and West Runton are situated between Sheringham and Cromer one mile apart
      on the North Norfolk Coast. With quiet unspoilt beaches, miles of footpaths, bridleways
      and commons with benches to relax on.&lt;/p&gt;
      &lt;p&gt;There are car parks in both villages. In East Runton situated on the cliff top at Beach
      Road the car park is a &amp;#147;Pay and Display&amp;#148;.&lt;/p&gt;
      &lt;p&gt;At West Runton situated on the A149 at the east end of the village, the car park is
      provided by the Parish Council and is free. There is also parking at the cliff top which
      carries a small charge.&lt;/p&gt;
      &lt;br /&gt;
      
    &lt;p&gt;&lt;img src="images/westruntonbeach.jpg" alt="West Runton Beach, North Norfolk, UK" id="imgleft" WIDTH="300" HEIGHT="225"&gt;There are large friendly caravan sites in both villages and ample camping facilities.&lt;/p&gt;&lt;p&gt;The villages have a good variety of thriving shops from which fresh
      produce is available, including camping equipment and outdoor clothing shops, butchers and
      family-run small supermarkets. Post office at West Runton.&lt;/p&gt;
      &lt;p&gt;East Runton boasts two public houses, a club and restaurants and a sports ground. At
      West Runton, there is a public house and a large hotel with a nine-hole golf course, a
      beach café and a restaurant in the village street. Buses are frequent through both
      villages and there is a railway station at West Runton.&lt;br&gt;
      &lt;/p&gt;
  &lt;/div&gt;&lt;/font size&gt;
  
      &lt;/div&gt;
     &lt;/div&gt;
    &lt;/div&gt;
   &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Many thanks in advance for any help given :)</p>