title: margin-top of a div moving also moving my body (relative position)
body: <p>I'm having some troubles with the top-menu of my website: One of my <code>div</code> is moving the body's position when i set a margin-top on it.</p>
  
  <p>Background : 
  Today i decided to implement Foundation to it and noticed they set the body position as relative, no big deal exept a small and understandable problem.
  My top-menu is composed of 2 main divs, the navbar, and the logo, below the navbar. My navbar's position is absolute, whereas the logo is set to relative, so the elements of my website can be positionned relatively to my logo's position.</p>
  
  <p>Here is what happens when i set a top margin of 30px to my <code>header-logo</code>, and as you can see the navbar is also getting moved from 30px because it is in fact the body itself being moved by 30px when i actually set it to the <code>header-logo</code> only (i know it because the page can be scrolled down to this exact 30px to make up for theses 30px of missing body)</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>@charset "utf-8";
  /* CSS Document */
  
  body {
   margin: 0;
   padding: 0;
   position: relative;
  }
  
  body.ftp li#current-ftp, 
  body.projects li#current-projects, 
  body.contact li#current-contact {
   text-shadow: 0 0 1px #666;
  }
  
  #navbar-header {
   position: absolute;
   top: 0;
   right: 0;
   left: 0;
   margin: 0;
   padding: 0;
  }
  
  #navbar-header #menu-left {
   float: left;
   display: inline-block;
   margin-left: 20px;
   font-family: 'Comfortaa', cursive;
   font-size: 16px;
   line-height: 1;
   color: #3F3F3F;
  }
  
  #navbar-header #menu-right {
   float: right;
   display: inline-block;
   margin-right: 20px;
   font-family: 'Comfortaa', cursive;
   font-size: 16px;
   line-height: 1;
   color: #3F3F3F;
  }
  
  #navbar-header ul {
   display: inline-block;
   list-style-type: none;
   margin: 5px 0 0 0;
   padding: 0;
   vertical-align: top;
   font-size: 16px;
   line-height: 1;
  }
  
  #navbar-header ul.icon li {
   display: inline-block;
   padding: 2px;
   margin: 0;
   vertical-align: top;
  }
  
  #navbar-header ul.txt li {
   font-family: 'Comfortaa', cursive;
   font-size: 16px;
   color: #3F3F3F;
   display: inline-block;
   margin: 0;
   padding: 8px 0 0 0;
  }
  
  #navbar-header ul.txt li a {
   font-family: 'Comfortaa', cursive;
   font-size: 16px;
   color: #3F3F3F;
   text-decoration: none;
   margin: 0;
   padding: 8px;
  }
  
  #navbar-header ul.txt a:hover {
   text-shadow: 0 0 1px #666;
  }
  
  #navbar-header #login-menu, #navbar-header #panel-menu {
   position: absolute;
   top: 0;
   right: 0;
   margin: 0;
   padding: 0;
  }
  
  #navbar-header #login-bubble {
   font-family: 'Open Sans', sans-serif;
   z-index: 5;
   visibility: hidden;
   color: #AAAAAA;
   position: absolute;
   right: 10px;
   top: 50px;
   width: 250px;
   height: 130px;
   padding: 0 15px 0 15px;
   background: #FFF;
   -webkit-border-radius: 3px;
   -moz-border-radius: 3px;
   border-radius: 3px;
   border: #CCC solid 1px;
   -moz-box-shadow:0 0 8px 0 #DDD;
   -webkit-box-shadow:0 0 8px 0 #DDD;
   box-shadow:0 0 8px 0 #DDD;
  }
  
  #navbar-header #login-bubble:after {
   content: '';
   position: absolute;
   border-style: solid;
   border-width: 0 10px 10px;
   border-color: #FFF transparent;
   display: block;
   width: 0;
   z-index: 1;
   top: -10px;
   left: 214px;
  }
  
  #navbar-header #login-bubble:before {
   content: '';
   position: absolute;
   border-style: solid;
   border-width: 0 11px 11px;
   border-color: #DDD transparent;
   display: block;
   width: 0;
   z-index: 0;
   top: -12px;
   left: 213px;
  }
  
  #login-username, #login-password {
   margin-bottom: 15px;
  }
  #navbar-header .username-icon {
      position: absolute;
      display: block;
      color: darken(#EDEDED, 10%);
      left: 23px;
      top: 15px;
      font-size: 20px;
   line-height: normal;
  }
  
  #navbar-header .password-icon {
      position: absolute;
      display: block;
      color: darken(#EDEDED, 10%);
      left: 25px;
      top: 62px;
      font-size: 20px;
   line-height: normal;
  }
  
  #navbar-header input#txt_username, #navbar-header input#txt_password {
   font-family: inherit;
   box-sizing:border-box;
   border-radius: 3px;
   font-size: 14px;
   height: 30px;
   line-height: 30px;
   width: 100%;
   margin: 15px 0 0 0;
   padding: 0 8px 0 30px ;
   display: block;
   background-color : #f7f7f7; 
      border: 1px solid #CCC;
   transition: 0.3s ease-out;
   -webkit-transition: 0.3s ease-out;
   -moz-transition: 0.3s ease-out;
   color: #333;
  }
  
  #navbar-header input#txt_username:-webkit-autofill, #navbar-header input#txt_password:-webkit-autofill,
  #navbar-header input#txt_username:-webkit-autofill:hover, #navbar-header input#txt_password:-webkit-autofill:hover,
  #navbar-header input#txt_username:-webkit-autofill:focus, #navbar-header input#txt_password:-webkit-autofill:focus {
      -webkit-box-shadow: 0 0 0px 1000px #f7f7f7 inset;
   -webkit-text-fill-color: #333;
  }
  
  #navbar-header input#txt_username:focus, #navbar-header input#txt_password:focus {
   padding: 0 8px 0 10px ;
   background-color : #f7f7f7; 
   border-color: #a6ba89;
   outline: 0px;
   -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 2px rgba(109,157,78,.6);
   -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 2px rgba(109,157,78,.6);
   box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 2px rgba(109,157,78,.6)
  }
  
  .placeholder {color: #aaa }
  ::-webkit-input-placeholder {color: #aaa}
  :-moz-placeholder {color: #aaa}
  
  #navbar-header #forgotten-pwd {
   font-size: 13px;
   font-family: inherit;
   margin-top: 12px;
   display: inline-block;
  }
  
  #navbar-header #forgotten-pwd a {
   text-decoration: none;
   color: #999;
  }
  
  #navbar-header #forgotten-pwd a:hover {
   color: #f48a00;
  }
  
  #button-border {
   width: 61px;
   height: 30px;
   border-bottom-left-radius: 32px;
   border-bottom-right-radius: 32px;
   border: 1px solid #CCC;
   border-top: 0;
   position: absolute;
   right: 26px;
   bottom: -30px;
   -moz-box-shadow:0 0 8px 0 #DDD;
   -webkit-box-shadow:0 0 8px 0 #DDD;
   box-shadow:0 0 8px 0 #DDD;
  }
  
  #submit-button {
   font-family: inherit;
   z-index: 1000;
   position: absolute;
   top: 105px;
   right: 34px;
  }
  #sub-login {
   font-family: inherit;
   width: 45px;
   height: 45px;
   display: block;
   margin: 0 auto -15px auto;
   background: #f7f7f7;
   border-radius: 100%;
   border: 1px solid #a6ba89;
   color: #a6ba89;
   font-size: 26px;
   line-height: 26px;
   cursor: pointer;
   box-shadow: 0px 0px 0px 7px #FFF;
   transition: 0.3s ease-out;
  }
  #sub-login:hover, #sub-login:focus {
      background: #a6ba89;
      color: #f7f7f7;
      outline: 0;
  }
  
  #navbar-header #panel-bubble {
   z-index: 5;
   visibility: hidden;
   color: #AAAAAA;
   position: absolute;
   right: 10px;
   top: 50px;
   width: 220px;
   height: 250px;
   padding: 0px;
   background: #FFF;
   -webkit-border-radius: 3px;
   -moz-border-radius: 3px;
   border-radius: 3px;
   border: #CCC solid 1px;
   -moz-box-shadow:0 0 8px 0 #CCC;
   -webkit-box-shadow:0 0 8px 0 #DDD;
   box-shadow:0 0 8px 0 #DDD;
  }
  
  #navbar-header #panel-bubble:after {
   content: '';
   position: absolute;
   border-style: solid;
   border-width: 0 10px 10px;
   border-color: #FFF transparent;
   display: block;
   width: 0;
   z-index: 1;
   top: -10px;
   left: 145px;
  }
  
  #navbar-header #panel-bubble:before {
   content: '';
   position: absolute;
   border-style: solid;
   border-width: 0 11px 11px;
   border-color: #DDD transparent;
   display: block;
   width: 0;
   z-index: 0;
   top: -12px;
   left: 144px;
  }
  
  #panel-more {
   border-top: 1px solid #EEE;
   position: absolute;
   bottom: 0px;
   right: 0px;
   left: 0px;
   height: 30px;
   witdth: 100%;
   background-color: #F7F7F7;
   font: 16px Candara;
   text-align: center;
   vertical-align: middle;
   color: #909090;
   padding-top: 3px;
  }
  
  #header-logo {
   position: relative;
   width: 333px;
   margin: 30px auto 60px auto;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;?php
  // start session &amp; handle logout
  session_start();
  if(isset($_GET["logout"]) &amp;&amp; $_GET["logout"] == 1){
   session_destroy();
   session_start();
   if(isset($_SERVER['HTTP_REFERER'])) {
   header('Location: '.$_SERVER['HTTP_REFERER']);  
  } else {
   header('Location: /index.php');  
  }
  exit; 
  }
  ?&gt;
  
  &lt;nav id="navbar-header"&gt;
   &lt;div id="menu-left"&gt;
    &lt;ul class="txt"&gt;
     &lt;?php if (isset($_SESSION['simple_auth']) &amp;&amp; $_SESSION['simple_auth'] == true &amp;&amp; $_SESSION['simple_auth']['username'] != 'guest'):?&gt;
     &lt;li&gt;&lt;?php echo "welcome, " . $_SESSION['simple_auth']['username'] . " !"; ?&gt;&lt;/li&gt;
     &lt;?php else:?&gt;
     &lt;li&gt;not logged in&lt;/li&gt;
     &lt;?php endif;?&gt;
    &lt;/ul&gt;
   &lt;/div&gt;
   &lt;div id="menu-right"&gt;
    &lt;ul class="txt"&gt;
     &lt;li id="current-ftp"&gt;&lt;a href="/ftp"&gt;ftp&lt;/a&gt;&lt;/li&gt;
     &lt;li id="current-projects"&gt;&lt;a href="/projects"&gt;projects&lt;/a&gt;&lt;/li&gt;
     &lt;li id="current-contact"&gt;&lt;a href="/contact"&gt;contact&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
    &lt;ul class="icon"&gt;
     &lt;li id="menu-panel"&gt;
      &lt;a href="#"&gt;&lt;img src="/style/img/icon_panel.jpg" width="30" height="30" alt="" name="icon_panel" 
      onmouseover="icon_panel.src='/style/img/icon_panel_hover.jpg'" 
      onmouseout="icon_panel.src='/style/img/icon_panel.jpg'" /&gt;&lt;/a&gt;
     &lt;/li&gt;
     &lt;?php if (isset($_SESSION['simple_auth']) &amp;&amp; $_SESSION['simple_auth'] == true &amp;&amp; $_SESSION['simple_auth']['username'] != 'guest'):?&gt;
     &lt;li id="menu-logout"&gt;
      &lt;a href="?logout=1"&gt;&lt;img src="/style/img/logout.jpg" width="30" height="30" alt="" name="logout" 
      onmouseover="logout.src='/style/img/logout_hover.jpg'" 
      onmouseout="logout.src='/style/img/logout.jpg'" /&gt;&lt;/a&gt;
     &lt;/li&gt;
     &lt;?php else:?&gt;
     &lt;li id="menu-login"&gt;
      &lt;a href="#"&gt;&lt;img src="/style/img/login.jpg" width="30" height="30" alt="" name="login" 
      onmouseover="login.src='/style/img/login_hover.jpg'" 
      onmouseout="login.src='/style/img/login.jpg'" /&gt;&lt;/a&gt;
     &lt;/li&gt;
     &lt;?php endif;?&gt;
    &lt;/ul&gt;
   &lt;/div&gt;
   &lt;div id="login-menu"&gt;
    &lt;div id="login-bubble"&gt;
     &lt;form method="post" action="/ftp/index.php?login=1" autocomplete="false"&gt;
      &lt;span id="login-username"&gt;
       &lt;input type="text" name="username" id="txt_username" placeholder="username" required="" value="" /&gt;
       &lt;span class="username-icon"&gt;&lt;i class="fa fa-user"&gt;&lt;/i&gt;&lt;/span&gt;
      &lt;/span&gt;
      &lt;span id="login-password"&gt;
       &lt;input type="password" name="password" id="txt_password" placeholder="password" required="" /&gt;
       &lt;span class="password-icon"&gt;&lt;i class="fa fa-lock"&gt;&lt;/i&gt;&lt;/span&gt;
      &lt;/span&gt;
      &lt;span id="forgotten-pwd"&gt;
       &lt;a href=""&gt;&lt;span&gt;Forgotten Password ?&lt;/span&gt;&lt;/a&gt;
      &lt;/span&gt;
      &lt;span id="submit-button"&gt;
       &lt;input type="hidden" name="redirect" value="&lt;?php echo "http://$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]"; ?&gt;" /&gt;
       &lt;button type="submit" name="submit" id="sub-login"&gt;&lt;i id="submit"class="fa fa-long-arrow-right"&gt;&lt;/i&gt;&lt;/button&gt;
      &lt;/span&gt;
      &lt;span id="button-border"&gt;&lt;/span&gt;
     &lt;/form&gt;
    &lt;/div&gt;
   &lt;/div&gt;
   &lt;div id="panel-menu"&gt;
    &lt;div id="panel-bubble"&gt;
     &lt;span id="panel-more"&gt;More&lt;/span&gt;
    &lt;/div&gt;
   &lt;/div&gt;
  &lt;/nav&gt;
  &lt;div id="header-logo"&gt;
   &lt;a href="/"&gt;&lt;img src="/style/img/apatikgg_logo.png" width="331" height="96" alt=""/&gt;&lt;/a&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>And even more oddly, it appears that i can fix that by just adding this line of code to my body's css : <code>border: 1px solid red;</code> , yes, if i set a border to my body everything goes as expected, see here :</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>@charset "utf-8";
  /* CSS Document */
  
  body {
   margin: 0;
   padding: 0;
   position: relative;
   border: 1px solid red;
  }
  
  body.ftp li#current-ftp, 
  body.projects li#current-projects, 
  body.contact li#current-contact {
   text-shadow: 0 0 1px #666;
  }
  
  #navbar-header {
   position: absolute;
   top: 0;
   right: 0;
   left: 0;
   margin: 0;
   padding: 0;
  }
  
  #navbar-header #menu-left {
   float: left;
   display: inline-block;
   margin-left: 20px;
   font-family: 'Comfortaa', cursive;
   font-size: 16px;
   line-height: 1;
   color: #3F3F3F;
  }
  
  #navbar-header #menu-right {
   float: right;
   display: inline-block;
   margin-right: 20px;
   font-family: 'Comfortaa', cursive;
   font-size: 16px;
   line-height: 1;
   color: #3F3F3F;
  }
  
  #navbar-header ul {
   display: inline-block;
   list-style-type: none;
   margin: 5px 0 0 0;
   padding: 0;
   vertical-align: top;
   font-size: 16px;
   line-height: 1;
  }
  
  #navbar-header ul.icon li {
   display: inline-block;
   padding: 2px;
   margin: 0;
   vertical-align: top;
  }
  
  #navbar-header ul.txt li {
   font-family: 'Comfortaa', cursive;
   font-size: 16px;
   color: #3F3F3F;
   display: inline-block;
   margin: 0;
   padding: 8px 0 0 0;
  }
  
  #navbar-header ul.txt li a {
   font-family: 'Comfortaa', cursive;
   font-size: 16px;
   color: #3F3F3F;
   text-decoration: none;
   margin: 0;
   padding: 8px;
  }
  
  #navbar-header ul.txt a:hover {
   text-shadow: 0 0 1px #666;
  }
  
  #navbar-header #login-menu, #navbar-header #panel-menu {
   position: absolute;
   top: 0;
   right: 0;
   margin: 0;
   padding: 0;
  }
  
  #navbar-header #login-bubble {
   font-family: 'Open Sans', sans-serif;
   z-index: 5;
   visibility: hidden;
   color: #AAAAAA;
   position: absolute;
   right: 10px;
   top: 50px;
   width: 250px;
   height: 130px;
   padding: 0 15px 0 15px;
   background: #FFF;
   -webkit-border-radius: 3px;
   -moz-border-radius: 3px;
   border-radius: 3px;
   border: #CCC solid 1px;
   -moz-box-shadow:0 0 8px 0 #DDD;
   -webkit-box-shadow:0 0 8px 0 #DDD;
   box-shadow:0 0 8px 0 #DDD;
  }
  
  #navbar-header #login-bubble:after {
   content: '';
   position: absolute;
   border-style: solid;
   border-width: 0 10px 10px;
   border-color: #FFF transparent;
   display: block;
   width: 0;
   z-index: 1;
   top: -10px;
   left: 214px;
  }
  
  #navbar-header #login-bubble:before {
   content: '';
   position: absolute;
   border-style: solid;
   border-width: 0 11px 11px;
   border-color: #DDD transparent;
   display: block;
   width: 0;
   z-index: 0;
   top: -12px;
   left: 213px;
  }
  
  #login-username, #login-password {
   margin-bottom: 15px;
  }
  #navbar-header .username-icon {
      position: absolute;
      display: block;
      color: darken(#EDEDED, 10%);
      left: 23px;
      top: 15px;
      font-size: 20px;
   line-height: normal;
  }
  
  #navbar-header .password-icon {
      position: absolute;
      display: block;
      color: darken(#EDEDED, 10%);
      left: 25px;
      top: 62px;
      font-size: 20px;
   line-height: normal;
  }
  
  #navbar-header input#txt_username, #navbar-header input#txt_password {
   font-family: inherit;
   box-sizing:border-box;
   border-radius: 3px;
   font-size: 14px;
   height: 30px;
   line-height: 30px;
   width: 100%;
   margin: 15px 0 0 0;
   padding: 0 8px 0 30px ;
   display: block;
   background-color : #f7f7f7; 
      border: 1px solid #CCC;
   transition: 0.3s ease-out;
   -webkit-transition: 0.3s ease-out;
   -moz-transition: 0.3s ease-out;
   color: #333;
  }
  
  #navbar-header input#txt_username:-webkit-autofill, #navbar-header input#txt_password:-webkit-autofill,
  #navbar-header input#txt_username:-webkit-autofill:hover, #navbar-header input#txt_password:-webkit-autofill:hover,
  #navbar-header input#txt_username:-webkit-autofill:focus, #navbar-header input#txt_password:-webkit-autofill:focus {
      -webkit-box-shadow: 0 0 0px 1000px #f7f7f7 inset;
   -webkit-text-fill-color: #333;
  }
  
  #navbar-header input#txt_username:focus, #navbar-header input#txt_password:focus {
   padding: 0 8px 0 10px ;
   background-color : #f7f7f7; 
   border-color: #a6ba89;
   outline: 0px;
   -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 2px rgba(109,157,78,.6);
   -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 2px rgba(109,157,78,.6);
   box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 2px rgba(109,157,78,.6)
  }
  
  .placeholder {color: #aaa }
  ::-webkit-input-placeholder {color: #aaa}
  :-moz-placeholder {color: #aaa}
  
  #navbar-header #forgotten-pwd {
   font-size: 13px;
   font-family: inherit;
   margin-top: 12px;
   display: inline-block;
  }
  
  #navbar-header #forgotten-pwd a {
   text-decoration: none;
   color: #999;
  }
  
  #navbar-header #forgotten-pwd a:hover {
   color: #f48a00;
  }
  
  #button-border {
   width: 61px;
   height: 30px;
   border-bottom-left-radius: 32px;
   border-bottom-right-radius: 32px;
   border: 1px solid #CCC;
   border-top: 0;
   position: absolute;
   right: 26px;
   bottom: -30px;
   -moz-box-shadow:0 0 8px 0 #DDD;
   -webkit-box-shadow:0 0 8px 0 #DDD;
   box-shadow:0 0 8px 0 #DDD;
  }
  
  #submit-button {
   font-family: inherit;
   z-index: 1000;
   position: absolute;
   top: 105px;
   right: 34px;
  }
  #sub-login {
   font-family: inherit;
   width: 45px;
   height: 45px;
   display: block;
   margin: 0 auto -15px auto;
   background: #f7f7f7;
   border-radius: 100%;
   border: 1px solid #a6ba89;
   color: #a6ba89;
   font-size: 26px;
   line-height: 26px;
   cursor: pointer;
   box-shadow: 0px 0px 0px 7px #FFF;
   transition: 0.3s ease-out;
  }
  #sub-login:hover, #sub-login:focus {
      background: #a6ba89;
      color: #f7f7f7;
      outline: 0;
  }
  
  #navbar-header #panel-bubble {
   z-index: 5;
   visibility: hidden;
   color: #AAAAAA;
   position: absolute;
   right: 10px;
   top: 50px;
   width: 220px;
   height: 250px;
   padding: 0px;
   background: #FFF;
   -webkit-border-radius: 3px;
   -moz-border-radius: 3px;
   border-radius: 3px;
   border: #CCC solid 1px;
   -moz-box-shadow:0 0 8px 0 #CCC;
   -webkit-box-shadow:0 0 8px 0 #DDD;
   box-shadow:0 0 8px 0 #DDD;
  }
  
  #navbar-header #panel-bubble:after {
   content: '';
   position: absolute;
   border-style: solid;
   border-width: 0 10px 10px;
   border-color: #FFF transparent;
   display: block;
   width: 0;
   z-index: 1;
   top: -10px;
   left: 145px;
  }
  
  #navbar-header #panel-bubble:before {
   content: '';
   position: absolute;
   border-style: solid;
   border-width: 0 11px 11px;
   border-color: #DDD transparent;
   display: block;
   width: 0;
   z-index: 0;
   top: -12px;
   left: 144px;
  }
  
  #panel-more {
   border-top: 1px solid #EEE;
   position: absolute;
   bottom: 0px;
   right: 0px;
   left: 0px;
   height: 30px;
   witdth: 100%;
   background-color: #F7F7F7;
   font: 16px Candara;
   text-align: center;
   vertical-align: middle;
   color: #909090;
   padding-top: 3px;
  }
  
  #header-logo {
   position: relative;
   width: 333px;
   margin: 30px auto 60px auto;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;?php
  // start session &amp; handle logout
  session_start();
  if(isset($_GET["logout"]) &amp;&amp; $_GET["logout"] == 1){
   session_destroy();
   session_start();
   if(isset($_SERVER['HTTP_REFERER'])) {
   header('Location: '.$_SERVER['HTTP_REFERER']);  
  } else {
   header('Location: /index.php');  
  }
  exit; 
  }
  ?&gt;
  
  &lt;nav id="navbar-header"&gt;
   &lt;div id="menu-left"&gt;
    &lt;ul class="txt"&gt;
     &lt;?php if (isset($_SESSION['simple_auth']) &amp;&amp; $_SESSION['simple_auth'] == true &amp;&amp; $_SESSION['simple_auth']['username'] != 'guest'):?&gt;
     &lt;li&gt;&lt;?php echo "welcome, " . $_SESSION['simple_auth']['username'] . " !"; ?&gt;&lt;/li&gt;
     &lt;?php else:?&gt;
     &lt;li&gt;not logged in&lt;/li&gt;
     &lt;?php endif;?&gt;
    &lt;/ul&gt;
   &lt;/div&gt;
   &lt;div id="menu-right"&gt;
    &lt;ul class="txt"&gt;
     &lt;li id="current-ftp"&gt;&lt;a href="/ftp"&gt;ftp&lt;/a&gt;&lt;/li&gt;
     &lt;li id="current-projects"&gt;&lt;a href="/projects"&gt;projects&lt;/a&gt;&lt;/li&gt;
     &lt;li id="current-contact"&gt;&lt;a href="/contact"&gt;contact&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
    &lt;ul class="icon"&gt;
     &lt;li id="menu-panel"&gt;
      &lt;a href="#"&gt;&lt;img src="/style/img/icon_panel.jpg" width="30" height="30" alt="" name="icon_panel" 
      onmouseover="icon_panel.src='/style/img/icon_panel_hover.jpg'" 
      onmouseout="icon_panel.src='/style/img/icon_panel.jpg'" /&gt;&lt;/a&gt;
     &lt;/li&gt;
     &lt;?php if (isset($_SESSION['simple_auth']) &amp;&amp; $_SESSION['simple_auth'] == true &amp;&amp; $_SESSION['simple_auth']['username'] != 'guest'):?&gt;
     &lt;li id="menu-logout"&gt;
      &lt;a href="?logout=1"&gt;&lt;img src="/style/img/logout.jpg" width="30" height="30" alt="" name="logout" 
      onmouseover="logout.src='/style/img/logout_hover.jpg'" 
      onmouseout="logout.src='/style/img/logout.jpg'" /&gt;&lt;/a&gt;
     &lt;/li&gt;
     &lt;?php else:?&gt;
     &lt;li id="menu-login"&gt;
      &lt;a href="#"&gt;&lt;img src="/style/img/login.jpg" width="30" height="30" alt="" name="login" 
      onmouseover="login.src='/style/img/login_hover.jpg'" 
      onmouseout="login.src='/style/img/login.jpg'" /&gt;&lt;/a&gt;
     &lt;/li&gt;
     &lt;?php endif;?&gt;
    &lt;/ul&gt;
   &lt;/div&gt;
   &lt;div id="login-menu"&gt;
    &lt;div id="login-bubble"&gt;
     &lt;form method="post" action="/ftp/index.php?login=1" autocomplete="false"&gt;
      &lt;span id="login-username"&gt;
       &lt;input type="text" name="username" id="txt_username" placeholder="username" required="" value="" /&gt;
       &lt;span class="username-icon"&gt;&lt;i class="fa fa-user"&gt;&lt;/i&gt;&lt;/span&gt;
      &lt;/span&gt;
      &lt;span id="login-password"&gt;
       &lt;input type="password" name="password" id="txt_password" placeholder="password" required="" /&gt;
       &lt;span class="password-icon"&gt;&lt;i class="fa fa-lock"&gt;&lt;/i&gt;&lt;/span&gt;
      &lt;/span&gt;
      &lt;span id="forgotten-pwd"&gt;
       &lt;a href=""&gt;&lt;span&gt;Forgotten Password ?&lt;/span&gt;&lt;/a&gt;
      &lt;/span&gt;
      &lt;span id="submit-button"&gt;
       &lt;input type="hidden" name="redirect" value="&lt;?php echo "http://$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]"; ?&gt;" /&gt;
       &lt;button type="submit" name="submit" id="sub-login"&gt;&lt;i id="submit"class="fa fa-long-arrow-right"&gt;&lt;/i&gt;&lt;/button&gt;
      &lt;/span&gt;
      &lt;span id="button-border"&gt;&lt;/span&gt;
     &lt;/form&gt;
    &lt;/div&gt;
   &lt;/div&gt;
   &lt;div id="panel-menu"&gt;
    &lt;div id="panel-bubble"&gt;
     &lt;span id="panel-more"&gt;More&lt;/span&gt;
    &lt;/div&gt;
   &lt;/div&gt;
  &lt;/nav&gt;
  &lt;div id="header-logo"&gt;
   &lt;a href="/"&gt;&lt;img src="/style/img/apatikgg_logo.png" width="331" height="96" alt=""/&gt;&lt;/a&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>If i don't set a margin to this <code>header-logo</code>, the body doesn't move tho.</p>
  
  <p>At this point i'm more obsessed to understand what the hell is happening here than solving it, it doesn't make sense, maybe it will to you ?</p>
  
  <p>There must be something wrong with my code, especially with the border thing fixing my problem which is unexplainable.</p>
  
  <p>I would also ask a related question : Why does Foundation set the body's position as relative ? I'm fairly new in web developping and so far always used the default static position so i was wondering what the advantages are ?</p>
  
  <p>Anyway thanks for reading this, any help would be really appreciated, and i'm hoping i've been accurate enough, even tho it's really hard to describe this and my website is on local.</p>
  
  <p>Thanks !</p>
  
  <p>-Apatik</p>