title: Website not zooming properly on most browsers, Most of the elements gets misplaced
body: <p>I am building a website at the moment using HTML and CSS.</p>
  
  <p>I have a small problem related to zooming. When the page is zoomed out most of the elements get messed up and out of place.</p>
  
  <p>Browsers used:</p>
  
  <ul>
  <li>Google Chrome</li>
  <li>Safari</li>
  <li>Opera</li>
  </ul>
  
  <p>More over when viewed from Safari on a 27" screen it becomes even worst.</p>
  
  <p><strong>index.html</strong></p>
  
  <pre><code>&lt;html xmlns:fb="http://www.facebook.com/2008/fbml"&gt;
      &lt;head&gt;
          &lt;title&gt;Arrow-TvSeries - Home&lt;/title&gt;
              &lt;link rel="stylesheet" type="text/css" href="style.css"&gt;
          &lt;meta property="fb:admins" content="{793705343}"/&gt;
      &lt;/head&gt;     
      &lt;body&gt;
      &lt;center&gt;
          &lt;table&gt;
              &lt;tr&gt;
                  &lt;td align="center"&gt;
                      &lt;div id="fb-root"&gt;&lt;/div&gt;
                      &lt;script&gt;(function(d, s, id) {
                        var js, fjs = d.getElementsByTagName(s)[0];
                        if (d.getElementById(id)) return;
                        js = d.createElement(s); js.id = id;
                        js.src = "//connect.facebook.net/en_GB/all.js#xfbml=1&amp;appId=80504353315";
                        fjs.parentNode.insertBefore(js, fjs);
                      }(document, 'script', 'facebook-jssdk'));&lt;/script&gt;
                      &lt;div id="fb-root"&gt;&lt;/div&gt;
                          &lt;script&gt;
                            window.fbAsyncInit = function() {
                              // init the FB JS SDK
                              FB.init({
                                appId      : '793705343',                                 // App ID from the app dashboard
                                channelUrl : '//www.arrow-tvseries.com/channel.html', // Channel file for x-domain comms
                                status     : true,                                    // Check Facebook Login status
                                xfbml      : true                                     // Look for social plugins on the page
                                cookie      : true,                                   // enable cookies to allow the server to access the session
                                oauth       : true                                    // enable OAuth 2.0
                              });
  
                              // Additional initialization code such as adding Event Listeners goes here
                            };
                            // Load the SDK asyncchronously
                            (function(d, s, id){
                               var js, fjs = d.getElementsByTagName(s)[0];
                               if (d.getElementById(id)) {return;}
                               js = d.createElement(s); js.id = id;
                               js.src = "//connect.facebook.net/en_US/all.js";
                               fjs.parentNode.insertBefore(js, fjs);
                             }(document, 'script', 'facebook-jssdk'));
                          &lt;/script&gt;
  
                          &lt;ui:composition xmlns="http://www.w3.org/1999/xhtml"
                          xmlns:fb="http://www.facebook.com/2008/fbml"
                          xmlns:f="http://java.sun.com/jsf/core"&gt;
  &lt;!--website--&gt;
                      &lt;div id="hood_image"&gt;
                              &lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;/br&gt;&lt;/br&gt;&lt;/br&gt;&lt;img src="images/oli_arrow4.png" align="right"/&gt;
                      &lt;/div&gt;
                      &lt;div id="sitewrapper"&gt;
                          &lt;div id="header"&gt;&lt;/div&gt;
                          &lt;div id="line"&gt;&lt;/div&gt;
                          &lt;div id="menu"&gt;
                              &lt;br&gt;&lt;a href="index.html"&gt;Home&lt;/a&gt; | &lt;a href="cast.html"&gt;Cast&lt;/a&gt; | &lt;a href="episodes.html"&gt;Episodes&lt;/a&gt;
                          &lt;/div&gt;
                  &lt;!--content--&gt;
                          &lt;div id="content"&gt;
                              &lt;div id="episodecontent"&gt;
                                  &lt;table border="0"&gt;
                                      &lt;tr&gt;
                                          &lt;td&gt;
                                              &lt;img id="episodeimg" src="images/Next-Episode.png"/&gt;
                                          &lt;/td&gt;
                                          &lt;td&gt;
                                              &lt;p style="color: white"&gt;&lt;b&gt;Title:&lt;/b&gt; Home Invasion&lt;br/&gt;&lt;b&gt;Date:&lt;/b&gt; 24th April 2013&lt;/p&gt;
                                          &lt;/td&gt;
                                      &lt;/tr&gt;
                                  &lt;/table&gt;
                              &lt;/div&gt;
                              &lt;div id="division1"&gt;
                                  &lt;p&gt;After a violent shipwreck, billionaire playboy Oliver Queen was 
                                  missing and presumed dead for five years before being discovered 
                                  alive on a remote island in the Pacific. When he returns home to 
                                  Starling City, his devoted mother Moira, much-beloved sister Thea, 
                                  and best friend Tommy welcome him home, but they sense Oliver has 
                                  been changed by his ordeal on the island. While Oliver hides the 
                                  truth about the man he's become, he desperately wants to make amends 
                                  for the actions he took as the boy he was. Most particularly, he 
                                  seeks reconciliation with his former girlfriend, Laurel Lance.&lt;/p&gt;&lt;br/&gt;
  
                                  &lt;p&gt;As Oliver reconnects with those closest to him, he secretly creates 
                                  the persona of Arrow a vigilante to right the wrongs of his family, 
                                  fight the ills of society and restore Starling City to its former glory. 
                                  By day, Oliver plays the role of a wealthy, carefree and careless 
                                  philanderer he used to be - flanked by his devoted chauffeur/bodyguard, 
                                  John Diggle - while carefully concealing the secret identity he turns 
                                  to under the cover of darkness. However, Laurel's father, Detective 
                                  Quentin Lance, is determined to arrest the vigilante operating in his 
                                  city. Meanwhile, Oliver's own mother, Moira, knows much more about the 
                                  deadly shipwreck than she has let on and is more ruthless than he 
                                  could ever imagine.&lt;/p&gt;&lt;br/&gt;
  
                                  &lt;p style="font-size: 20px"&gt;&lt;b&gt;I n t r o d u c t i o n&lt;/b&gt;&lt;/p&gt;&lt;br/&gt;
  
                                  &lt;p&gt;At the beginning of each episode, with the exception of "Pilot", the 
                                  first episode of the series, a voiceover of Oliver Queen describes 
                                  briefly the hardships that Oliver faced on Lian Yu. He states that 
                                  as he returned, he set out to fulfill his father's dying wish.&lt;/p&gt;&lt;br/&gt;
  
                                  &lt;p&gt;"My name is Oliver Queen. For five years I was stranded on an 
                                  island with only one goal: survive. Now I will fulfill my father's 
                                  dying wish. To use the list of names he left me and bring down those 
                                  who are poisoning my city. To do this, I must become someone else. 
                                  I must become... something else."&lt;/p&gt;
  
                                  &lt;div id="video" align="middle"&gt;
                                      &lt;iframe width="640" height="360" 
                                          src="http://www.youtube.com/embed/xZrFSsc6CpI?autoplay=1" 
                                          frameborder="1" allowfullscreen&gt;
                                      &lt;/iframe&gt;
                                      &lt;!--?autoplay=1--&gt;
                                  &lt;/div&gt;
                                  &lt;div&gt;
                                      &lt;script type="text/javascript"&gt;&lt;!--
                                          google_ad_client = "ca-pub-8938167182852335";
                                          /* Home paga bottom */
                                          google_ad_slot = "9919170802";
                                          google_ad_width = 468;
                                          google_ad_height = 60;
                                          //--&gt;
                                      &lt;/script&gt;
                                      &lt;script type="text/javascript"
                                          src="http://pagead2.googlesyndication.com/pagead/show_ads.js"&gt;
                                      &lt;/script&gt;
                                  &lt;/div&gt;
                                  &lt;div style="float: right; font-size: 9px;"&gt;
                                      &lt;p&gt;&lt;br/&gt;&lt;br/&gt;Most of the information about this Tv-Show is taken from &lt;a href="http://http://www.imdb.com/title/tt2193021/?ref_=sr_1" target="new"&gt;IMDB.COM&lt;/a&gt;&lt;/p&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                              &lt;div id="division2"&gt;
                                  &lt;div class="fb-comments" data-href="http://www.arrow-tvseries.com" data-width="200" 
                                      data-num-posts="10" data-colorscheme="dark"&gt;
                                  &lt;/div&gt;
                                  &lt;div class="fb-like" data-href="http://www.arrow-tvseries.com" data-send="false" 
                                      data-width="220" data-show-faces="true" data-font="arial"&gt;
                                  &lt;/div&gt;&lt;br/&gt;
                                  &lt;div&gt;&lt;br/&gt;
                                      &lt;p&gt;&lt;b&gt;You may also like:&lt;/b&gt;&lt;/p&gt;
                                  &lt;/div&gt;
                                  &lt;div&gt;
                                      &lt;script type="text/javascript"&gt;&lt;!--
                                          google_ad_client = "ca-pub-8938167182852335";
                                          /* First Ad */
                                          google_ad_slot = "7105305203";
                                          google_ad_width = 120;
                                          google_ad_height = 600;
                                          //--&gt;
                                      &lt;/script&gt;
                                      &lt;script type="text/javascript"
                                      src="http://pagead2.googlesyndication.com/pagead/show_ads.js"&gt;
                                      &lt;/script&gt;
                                  &lt;/div&gt;
                                  &lt;div&gt;
                                      &lt;br/&gt;&lt;br/&gt;&lt;a href="http://www.imdb.com"&gt;&lt;img src="images/imdb.png" alt="IMDB" width="100" /&gt;&lt;/a&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
          &lt;/table&gt;
      &lt;/center&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p></p>
  
  <p><strong>style.css</strong></p>
  
  <pre><code>a:link    {color:#fff;} /* unvisited link */
  a:visited {color:#fff;} /* visited link */
  a:hover   {color:#2e6402;} /* mouse over link */
  a:active  {color:#fff;} /* selected link */
  
  #table{
  padding-top: 30px;
  padding-bottom: 30px;
  z-index: 100;
  }
  
  #header{
  background-position: center;
  position: relative;
  background-image:url('images/logo_bg.png');
  background-repeat:no-repeat;
  border-radius: 25px;
  height: 331px;
  width: 1300px;
  padding-top: 0px;
  padding-left: 0px;
  padding-right: 0px;
  z-index: -3;
  /*border:2px solid;*/
  display:block;
  margin: 0 auto 0 auto;
  }
  
  #line{
  width: 1290px;
  height: auto;
  background-color: white;
  padding-top: 1px;
  margin: 0 auto 0 auto;
  }
  
  body{
  background-color: black;
  }
  
  #sitewrapper{
  width: 1300px;
  height: 100%;
  padding-left: 0px;
  padding-top: 3px;
  padding-right: auto;
  margin: 0 auto 0 auto;
  }
  
  p{
  text-align: justify;
  font-family: arial;
  padding-left: 0px;
  margin: 0 auto 0 auto;
  color: white;
  }
  
  p2{
  text-align: justify;
  font-family: arial;
  padding-left: 0px;
  color: green;
  margin: 0 auto 0 auto;
  }
  
  #menu{
  width: 1250px;
  height: auto;
  color: white;
  padding-top: 0px;
  padding-right: 100px;
  padding-bottom: 0px;
  font-size: 120%;
  /*border:2px solid;*/
  text-align: right;
  font-family: arial;
  z-index: 31;
  position: relative;
  margin: 0 auto 0 auto;
  }
  
  #episodeimg{
  width: 250px;
  float: left;
  padding-top:0px;
  padding-bottom: 0px;
  padding-left: 0px;
  padding-right: 10px;
  margin: 0 auto 0 auto;
  }
  
  #episodecontent{
  width: 55%;
  float: auto;
  margin: 0 auto 0 auto;
  }
  
  #hood_image{
  float: left;
  width: 30%;
  height: auto;
  position: fixed;
  z-index: 1;
  padding-left: 0px;
  }
  
  #content{
  float: right;
  width: 85%;
  position: absolute;
  padding-top: 0px;
  padding-left: 0px;
  padding-right: 0px;
  z-index: 5;
  margin: 0 auto 0 auto;
  /*border:2px solid;*/
  }
  
  #division1{
  position: relative;
  float: left;
  height: 100%;
  width: 700px;
  color: white;
  padding-top: 30px;
  padding-left: 20%;
  padding-right: 0px;
  padding-bottom: 10px;
  z-index: 30;
  margin: 0 auto 0 auto;
  /*border:2px solid;*/
  }
  
  #division2{
  float: right;
  height: 100%;
  width: 20%;
  /*padding-top: 0px;
  padding-left: 0px;
  padding-right: 0px;*/
  color: white;
  border:2px solid;
  margin: 0 auto 0 auto;
  z-index: 1000;
  overflow: hidden;
  position: relative;
  }
  
  #video{
  padding-top: 50px;
  padding-left: 0%;
  padding-right: 0%;
  padding-bottom: 100px;
  /*border:2px solid;*/
  }
  
  #footer{
  /*background-color: red;*/
  height: 10px;
  width: 100%;
  color: black;
  background-color: white;
  display:block;
  }
  </code></pre>
  
  <p><strong>Link to this website:</strong></p>
  
  <p>www.arrow-tvseries.com</p>