title: How can i prevent divs from moving while resizing the page
body: <p>im creating a new website and im noob at html and css, thats my first website, but i searched a lot about how to create a website.</p>
  
  <p>But when i resize the window from the browser, all divs move automatically.</p>
  
  <p>My website: <a href="http://teteste.herobo.com/" rel="nofollow">http://teteste.herobo.com/</a> - The language is portuguese, but you can understand whats happening.</p>
  
  <p>As you can see, when you resize the window, the divs change automatically, is there any way to prevent divs from moving while resizing the page?</p>
  
  <p>My Html code:</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
  &lt;script type='text/javascript' src='http://code.jquery.com/jquery-1.10.2.min.js'&gt;&lt;/script&gt;
  &lt;link rel="stylesheet" type="text/css" href="css/style.css"/&gt;
  &lt;link href='http://fonts.googleapis.com/css?family=Armata' rel='stylesheet' type='text/css'&gt;
  
  &lt;link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'&gt;
  
  &lt;title&gt;AngoBooks&lt;/title&gt;
  &lt;/head&gt;
  &lt;script type="text/javascript"&gt;
  
  $(document).ready(function(){
      $('img.g1').hover(function() {
          $(this).stop().animate({opacity:1}, 'fast');
      }, function() {
          $(this).stop().animate({opacity:.5}, 'slow');
      });
  
  });
  
  &lt;/script&gt;
  
  
  &lt;script type="text/javascript"&gt;
  
  var i = 0;
  var path = new Array();
  
  path[0] = "imagens/1.png";
  path[1] = "imagens/2.png";
  path[2] = "imagens/3.png";
  
  var k = path.length-1; 
  
  var caption = new Array();
  
  
  caption[0] = "Primeira descrição";
  caption[1] = "Segunda descrição";
  caption[2] = "Terceira descrição";
  
  
  function swapImage(){
  var el = document.getElementById("mydiv");
  el.innerHTML=caption[i];
  var img= document.getElementById("slide");
  img.src= path[i];
  
  
  if(i &lt; k ) { i++;} 
  else  { i = 0; }
  setTimeout("swapImage()",5000);
  
  
  }
  
  function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
  window.onload = func;
  } else {
  window.onload = function() {
  if (oldonload) {
  oldonload();
  }
  func();
  }
  }
  }
  
  
  
  addLoadEvent(function() {
  swapImage();
  
  
  }); 
  &lt;/script&gt;
  
  
  
  
  &lt;body&gt;
  
  &lt;div class="cbc"&gt;
  &lt;div id="redes"&gt;
  
  
  &lt;div style="width:90%; solid #000;"&gt;
  &lt;div style="float:left; width:33.3%;"&gt;
        &lt;div align="center"&gt;&lt;img src="imagens/facebook.png" height="40" width="40" /&gt;
          &lt;img src="imagens/twitter.png" height="40" width="40" /&gt;
          &lt;img src="imagens/g+.png" height="40" width="40" /&gt;
  
  
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div style="float:left; width:33.3%;"&gt;
  
      &lt;form method="POST" action="http://YOUR_DOMAIN_HERE:81/login/login.php"&gt;
    &lt;div align="right"&gt;&lt;font color="#FFFFFF" face="'Armata', sans-serif"&gt;Utilizador:&lt;/font&gt;
    &lt;input type="text" name="Utilizador" size="15" /&gt;
  
        &lt;/div&gt;
  &lt;/div&gt;
      &lt;div style="float:left; width:33.4%;"&gt;&lt;font color="#FFFFFF" face="'Armata', sans-serif"&gt;Password:&lt;/font&gt; &lt;input type="text" name="username" size="15" /&gt;
  
  
      &lt;button type="submit" value="Login" class="botao"&gt;Entrar&lt;/button&gt;
  
      &lt;button type="submit" value="Cadastrar" class="botao"&gt;Registar&lt;/button&gt;&lt;/div&gt;
  &lt;div style="clear:both;"&gt;&lt;/div&gt;
  
  
  &lt;/div&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;/div&gt;
  &lt;div id="principal"&gt;
  &lt;div class="centered-block"&gt;
          &lt;a href="/" class="logo-lnk"&gt;
            &lt;img src="imagens/logo.png"/&gt;
          &lt;/a&gt; 
  &lt;nav id="menu"&gt;
      &lt;ul&gt;
          &lt;li&gt;&lt;a href="#"&gt;&lt;font color="white"&gt;Ínicio&lt;/font&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;&lt;font color="white"&gt;Categorias&lt;/font&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;&lt;font color="white"&gt;Outros produtos&lt;/font&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;&lt;font color="white"&gt;Carrinho&lt;/font&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;div id="divisoria"&gt;&lt;/div&gt;
      &lt;/ul&gt;
  
  &lt;/nav&gt;
  &lt;/div&gt;
    &lt;div class="subtitulo"&gt;
  
  &lt;p&gt;&lt;font color="white"&gt;Vendemos Online, desde 2011, os melhores livros&lt;/p&gt;
  
  &lt;p&gt; do mercado em Angola, encomende já o seu.&lt;/font&gt;&lt;/p&gt;
  &lt;/div&gt;
  
  &lt;div id="slideshow"&gt;
  
  &lt;body&gt;
  &lt;img name="slide" id="slide" alt ="my images" height="300" width="900" src="imagens/1.png"/&gt;
  &lt;div id="mydiv"&gt;&lt;/div&gt;
  
  
    &lt;script&gt;
  document.getElementById("mydiv").style.color="white";
  &lt;/script&gt;
  
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div style="width:100%; padding: 160px 0 10px 0;"&gt;
  
  &lt;div style="clear:both;"&gt;&lt;/div&gt;
  
  
  
  &lt;div style="width:100%; padding: 3px 0 10px 0;"&gt;
      &lt;div style="float:left; width:33.3%; height:28px; background-image:url(imagens/titulo.png)"&gt;&lt;/div&gt;
      &lt;div style="float:left; width:33.3%; height:28px;"&gt;&lt;p align="center"&gt;&lt;font size="6" color="#ff7c00" face="'Roboto', sans-serif"&gt; Principais categorias &lt;/p&gt;&lt;/div&gt;
      &lt;div style="float:left; width:33.4%; height:28px; background-image:url(imagens/titulo.png)"&gt;&lt;/div&gt;
  &lt;div style="clear:both;"&gt;&lt;/div&gt;
  
  
  
  
  &lt;/div&gt;
  
  &lt;div class="fade1"&gt;
  &lt;img src="imagens/g1.png" alt="foto" class="g1" /&gt;
  &lt;img src="imagens/g2.png" alt="foto" class="g1" /&gt;
  &lt;/div&gt;
  
  &lt;div class="fade2"&gt;
  &lt;img src="imagens/g3.png" alt="foto" class="g1"/&gt;
  &lt;img src="imagens/g4.png" alt="foto" class="g1"/&gt;
  &lt;img src="imagens/g5.png" alt="foto" class="g1"/&gt;
  &lt;/div&gt;
  
  
  
  
  
  &lt;div style="clear:both;"&gt;&lt;/div&gt;
  &lt;div class="creditos"&gt;
  &lt;div class="empresa"&gt;
  
  &lt;div style="width:90%; solid #000; position:relative;"&gt;
      &lt;div style="float:left; width:25%;"&gt;&lt;h1 align="left"
  
  
  
      &gt;&lt;font color="#A66100"&gt;Atendimento&lt;/font&gt;&lt;/h1&gt;
        &lt;div align="left"&gt;
          &lt;ul id="atendimento"&gt;
            &lt;li&gt;Contacte-nos&lt;/li&gt;
            &lt;li&gt;Devoluções&lt;/li&gt;
            &lt;li&gt;Mapa do site&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/div&gt;
  &lt;ul id="atendimento"&gt;
  &lt;/ul&gt;&lt;/div&gt;
      &lt;div style="float:left; width:25%;"&gt;&lt;h1 align="left"&gt;Conta&lt;/h1&gt;
        &lt;div align="left"&gt;
          &lt;ul id="Conta"&gt;
            &lt;li&gt;Conta&lt;/li&gt;
            &lt;li&gt;Histórico de Pedido&lt;/li&gt;
            &lt;li&gt;Newsletter&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/div&gt;
  &lt;ul id="Conta"&gt;
  &lt;/ul&gt;&lt;/div&gt;
      &lt;div style="float:left; width:25%;"&gt;&lt;h1 align="left"&gt;Extras&lt;/h1&gt;
        &lt;div align="center"&gt;
          &lt;ul id="Extras"&gt;
            &lt;li&gt;
              &lt;div align="left"&gt;Fabricantes
              &lt;/div&gt;
            &lt;/li&gt;
            &lt;li&gt;
              &lt;div align="left"&gt;Vale Presente
              &lt;/div&gt;
            &lt;/li&gt;
            &lt;li&gt;
              &lt;div align="left"&gt;Promoções&lt;/div&gt;
            &lt;/li&gt;
          &lt;/ul&gt;
        &lt;/div&gt;
        &lt;ul id="Extras"&gt;
  &lt;/ul&gt;&lt;/div&gt;
      &lt;div style="float:left; width:25%;"&gt;&lt;div class="informacao"&gt;
  &lt;h1 align="left"&gt;Informação&lt;/h1&gt;
  &lt;div align="left"&gt;
    &lt;ul id="info"&gt;
      &lt;li&gt;Sobre nós&lt;/li&gt;
      &lt;li&gt;Sobre as Encomendas&lt;/li&gt;
      &lt;li&gt;Termos e Condições&lt;/li&gt;
    &lt;/ul&gt;
  
  &lt;/div&gt;
  &lt;ul id="info"&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
  
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt; 
  &lt;/div&gt;
  &lt;/div&gt;
  
  
  &lt;div style="width:100%; padding: 0px 0 10px 0;"&gt;
      &lt;div style="float:left; width:33.3%; height:18px;&gt;&lt;div id="redessociais"&gt;
  &lt;/div&gt;
      &lt;div style="float:left; width:33.3%; height:18px;"&gt;&lt;div class="developer"&gt;Copyright © 2013 AngoBooks. Todos os direitos reservados. &lt;br&gt; Site desenvolvido por: Rúben Diogo.&lt;/p&gt;&lt;/div&gt;&lt;/div&gt;
  &lt;div style="clear:both;"&gt;&lt;/div&gt;
      &lt;div style="float:left; width:33.4%; height:18px;"&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>My Css code:</p>
  
  <pre><code>* {
      padding:0;
      margin:0 auto;
  }
   div#principal {
      background-image:url(../estrutura/bg.png);
      height:410px;
      background-repeat:repeat-x;
      width:100%;
  }
   #menu ul {
      padding:0px;
      margin:23px;
      text-aligne:center;
      list-style:none;
      text-align:enter !important;
      left:162px;
      float:right;
      font-family:'Armata', sans-serif;
  }
   #menu ul li {
      display:inline;
  }
   #menu ul li a {
      padding:2px 10px;
      display:inline-block;
      color:black;
      text-decoration:none;
      z- ndex:12;
      horizontal-align:middle;
  }
   #menu ul li a:hover {
      color:white;
      border-bottom:3px solid white;
  }
   .logo-lnk {
      width:250px;
      display:block;
      float:left;
  }
   .logo-lnk img {
      width:100%;
      border:0;
  }
   .centered-block {
      width:987px;
      margin:0 auto;
      padding:23px 0 20px 0;
  }
   div#divisoria {
      height:1px;
      weight:100%;
      background:white;
  }
   .subtitulo {
      padding:56px 0 20px 0;
      text-align:center;
      font-size:45px;
      font-family:'Roboto', sans-serif;
      text-shadow:0.0em 0.0em 0.01em #FFB873;
  }
   .g1 {
      background:none;
  }
   .g1:hover {
      background:#0000ff;
  }
   .fade1 {
      padding:10px 0 20px 0;
      text-align:center;
  }
   .fade2 {
      text-align:center;
  }
   div#slideshow {
      margin:0 auto;
      text-align:center;
  }
   div#mydiv {
      background-color:#ff7c00;
      width:900px;
      font-family:'Armata', sans-serif;
  }
   .creditos {
      background-image:url(../estrutura/bg2.png);
      height:75px;
      weight:100%;
      padding:90px 0 20px 0;
      text-align:center;
  }
   .empresa {
      list-style-type:none;
      color:#A66400;
      font-family:'Roboto', sans-serif;
      font-size:12px }
   ul#atendimento {
      list-style-type:none;
      font-size:13px;
  }
   ul#Extras {
      list-style-type:none;
      font-size:13px;
  }
   ul#Conta {
      list-style-type:none;
      font-size:13px;
  }
   ul#info {
      list-style-type:none;
      font-size:13px;
  }
   div#titulo {
      background-image:url(../imagens/titulo.png);
      width:100%;
      height:28px;
  }
   .facebook {
      text-align:left;
      width:60px;
      height:60px;
  }
   .youtube {
      text-align:left;
      width:60px;
      height:60px;
  }
   .twitter {
      text-align:left;
      width:60px;
      height:60px;
  }
   .developer {
      font-size:12px;
      color:#bebebe;
      text-align:center;
  }
   div#redes {
      position:fixed;
      top:0;
      left:0;
      width:100%;
      height:40px;
      background:url(../imagens/bgg.jpg);
      z-index:30;
      opacity:0.6;
      filter:alpha(opacity=60);
  }
   .cbc {
      height:40px;
  }
   .botao {
      background-color:#ff7c00;
      color:white;
      font-family:'Armata', sans-serif;
      position:absolute;
  }
  </code></pre>