title: Header php not exactly in place
body: <p>I'm including my header and footer with PHP. But the problem is that header doesn't always stay in it's place (horizantally). I want it to be stable on every page but it keeps moving left and right about some pixels. And also the content is not always in it's place, it's moving a little left or right on one of the pages. If you see this example, you can understand it better.
  See the difference between those two pages:
  1- <a href="http://www.altayda.com/test2/" rel="nofollow">http://www.altayda.com/test2/</a>
  2- <a href="http://www.altayda.com/test2/about.php" rel="nofollow">http://www.altayda.com/test2/about.php</a></p>
  
  <p>And here are the codes. Thanks in advance:</p>
  
  <p><strong>index.php</strong></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;title&gt;psdtowebindex12323.psd&lt;/title&gt;
          &lt;link href="styles.css" rel="stylesheet" type="text/css"&gt;
         &lt;script type="text/javascript" src="jquery.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="frameworkmodified.js"&gt;&lt;/script&gt;
  
  &lt;/head&gt;
  
      &lt;body&gt;
  
     &lt;div id="header"&gt;&lt;?php include 'header.php'; ?&gt;&lt;/div&gt;
  
  
     &lt;div id="container"&gt;
  
      &lt;ul id="filter"&gt;&lt;hr size=1&gt;&lt;br /&gt;
          &lt;li class="current"&gt;&lt;a href="#"&gt;All&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Poster Design&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Branding&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Illustration&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Painting&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Print Design&lt;/a&gt;&lt;/li&gt;
          &lt;br /&gt;&lt;br /&gt;
          &lt;hr size=1&gt;
      &lt;/ul&gt;
  
      &lt;ul id="portfolio"&gt;
  
          &lt;li class="poster-design"&gt;&lt;a class="image" href="#"&gt;&lt;span class="rollover" &gt;&lt;/span&gt; 
  &lt;img class="imgborder" src="images/politician.png" alt="" height="156" width="263" /&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;li class="poster-design"&gt;&lt;a class="image" href="#"&gt;&lt;span class="rollover" &gt;&lt;/span&gt; 
  &lt;img class="imgborder" src="images/recycle.png" alt="" height="156" width="263" /&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;li class="poster-design"&gt;&lt;a class="image" href="#"&gt;&lt;span class="rollover" &gt;&lt;/span&gt; 
  &lt;img class="imgborder" src="images/women.png" alt="" height="156" width="263" /&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;li class="poster-design"&gt;&lt;a class="image" href="#"&gt;&lt;span class="rollover" &gt;&lt;/span&gt; 
  &lt;img class="imgborder" src="images/warwomen.png" alt="" height="156" width="263" /&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;li class="poster-design"&gt;&lt;a class="image" href="#"&gt;&lt;span class="rollover" &gt;&lt;/span&gt; 
  &lt;img class="imgborder" src="images/joy.png" alt="" height="156" width="263" /&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;li class="poster-design"&gt;&lt;a class="image" href="#"&gt;&lt;span class="rollover" &gt;&lt;/span&gt; 
  &lt;img class="imgborder" src="images/bombs.png" alt="" height="156" width="263" /&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;li class="branding"&gt;&lt;a class="image" href="#"&gt;&lt;span class="rollover" &gt;&lt;/span&gt; 
  &lt;img class="imgborder" src="images/mir.png" alt="" height="156" width="263" /&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;li class="illustration"&gt;&lt;a class="image" href="#"&gt;&lt;span class="rollover" &gt;&lt;/span&gt; 
  &lt;img class="imgborder" src="images/vader.png" alt="" height="156" width="263" /&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;li class="illustration"&gt;&lt;a class="image" href="#"&gt;&lt;span class="rollover" &gt;&lt;/span&gt; 
  &lt;img class="imgborder" src="images/mario.png" alt="" height="156" width="263" /&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;li class="painting"&gt;&lt;a class="image" href="#"&gt;&lt;span class="rollover" &gt;&lt;/span&gt; 
  &lt;img class="imgborder" src="images/eye.png" alt="" height="156" width="263" /&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;li class="print-design"&gt;&lt;a class="image" href="#"&gt;&lt;span class="rollover" &gt;&lt;/span&gt; 
  &lt;img class="imgborder" src="images/rain.png" alt="" height="156" width="263" /&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  &lt;div class="footer"&gt;&lt;?php include 'footer.php'; ?&gt;&lt;/div&gt;
  
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>styling of index</strong></p>
  
  <pre><code>/* Portfolio Filter Stylesheet */
  
  /*****Reset*****/
  html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote, pre, form, fieldset, table, th, td { margin: 0; padding: 0; }
  
  /*****Basic Definitions*****/
  body { color: #333; font: 12px/18px Verdana, Helvetica, Arial, sans-serif; }
  h1 { font-size: 1.667em; }
  h2 { font-size: 1.5em; }
  h3 { font-size: 1.333em; }
  h4 { font-size: 1.167em; }
  h5, h6 { font-size: 1em; }
  
  a { color: #333; }
  a:visited { }
  a:hover { text-decoration: none; }
  p, ul, ol, dl, table { margin-bottom: 18px; }
  ul, ol, dd { margin-left: 36px; }
  
  /*****Custom Classes*****/
  .clearing { clear: both; }
  .last { margin-bottom: 0; }
  .screenReader { left: -9999px; position: absolute; top: -9999px; }
  
  /*****Basic Layout*****/
  div#container { margin: 0px auto 0; overflow: hidden; width: 860px; }
  
  
  
  ul#filter { float: left; font-size: 16px; list-style: none; margin-left: 0px; margin-top:250px; width: 100%; font-family:Helvetica }
  ul#filter li { 
      border-right: 1px solid #dedede;
      float: left;
      line-height: 16px;
      margin-right: 10px;
      padding-right: 10px;
  }
  ul#filter li:last-child { border-right: none; margin-right: 0; padding-right: 0; }
  ul#filter a { color: #333; text-decoration: none; }
  ul#filter li.current a, ul#filter a:hover { color: #A1A1A1; }
  ul#filter li.current a { color: #333; font-weight: bold; font-family:Helvetica }
  
  ul#portfolio { float: left; list-style: none; margin-left:0px; margin-right:-35px; margin-top:20px;  border: 0px solid #dedede;  }
  ul#portfolio li { 
      border: 0px solid #dedede; 
      float: left; 
      margin: 0 31px 20px 0; 
      padding: 0px;
      width: 263px;
      height: 156px
  
  }
  ul#portfolio a { display: block; width: 100%; }
  ul#portfolio a:hover { text-decoration: none; }
  ul#portfolio img { border: 0px solid #dedede; display: block; padding-bottom: 5px; }
  
  hr { display: block; height: 1px;
      border: 0; border-top: 1px solid #ccc;
      margin: 1em 0; padding: 0; width: 100%; }
  
  
      span.rollover {
      opacity: 0;
      -o-transition-duration: 1s;
      -moz-transition-duration: 1s;
      -webkit-transition: -webkit-transform 1s;
      background:url(images/mag.png) center center no-repeat #ffffff;
  
      cursor: pointer;
      height: 156px;
      width: 263px;
      position: absolute;
      z-index: 10;
      opacity: 0;
  }
  
  span.rollover:hover {
  
      opacity: 0.9;
      -o-transition-duration: 1s;
      -moz-transition-duration: 1s;
      -webkit-transition: -webkit-transform 1s; 
  
      -webkit-box-shadow: 0px 0px 0px #000;
      -moz-box-shadow: 0px 0px 0px #000;
      box-shadow: 0px 0px 0px #000;
  }
  </code></pre>
  
  <p><strong>about.php</strong></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;title&gt;psdtowebindex12323.psd&lt;/title&gt;
          &lt;link href="aboutstyle.css" rel="stylesheet" type="text/css"&gt;
  
  
  
  
  
  
  
  
  
  
  &lt;/head&gt;
  
      &lt;body&gt;
  
     &lt;div id="header"&gt;&lt;?php include 'header.php'; ?&gt;&lt;/div&gt;
  
  
     &lt;div id="container"&gt;
  
     &lt;div id="title"&gt;&lt;hr size=1&gt;
     &lt;div id="titletext"&gt;
     &lt;br /&gt;
     About me
     &lt;br /&gt;&lt;br /&gt;&lt;br /&gt;
     &lt;/div&gt;
  
     &lt;hr size=1&gt;&lt;/div&gt;
  
  
  
  
  &lt;/div&gt;
  &lt;div class="footer"&gt;&lt;?php include 'footer.php'; ?&gt;&lt;/div&gt;
  
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>About Style</strong> </p>
  
  <pre><code>@charset "utf-8";
  /* CSS Document */
  
  
  /*****Reset*****/
  html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote, pre, form, fieldset, table, th, td { margin:0; padding: 0; }
  
  /*****Basic Definitions*****/
  body { color: #333; font: 12px/18px Verdana, Helvetica, Arial, sans-serif; }
  h1 { font-size: 1.667em; }
  h2 { font-size: 1.5em; }
  h3 { font-size: 1.333em; }
  h4 { font-size: 1.167em; }
  h5, h6 { font-size: 1em; }
  
  a { color: #333; }
  a:visited { }
  a:hover { text-decoration: none; }
  p, ul, ol, dl, table { margin-bottom: 18px; }
  ul, ol, dd { margin-left: 36px; }
  
  /*****Custom Classes*****/
  .clearing { clear: both; }
  .last { margin-bottom: 0; }
  .screenReader { left: -9999px; position: absolute; top: -9999px; }
  
  
  
  
  /*****Basic Layout*****/
  div#container { margin: 0px auto 0; overflow: hidden; width: 860px; }
  
  #title {
  
      margin-top:254px;
      width:860px;
  
  
  
  
       }
  
  #titletext {
  
  
      width:860px;
  
      float:left;
      font-family:Helvetica;
      font-size:26px;
      margin-top:2px;
  
  
   }
  
   hr { display: block; height: 1px;
      border: 0; border-top: 1px solid #ccc;
      margin: 1em 0; padding: 0; width: 100%; }
  
  #header {
  
  
      width:100%;
      float:left;
  
      margin: 0px auto 0; overflow: hidden; 
      }
  
  
  .footer {
  
  
      margin: 0px auto 0;
  
      width:860px;}
  </code></pre>
  
  <p><strong>Header.php</strong></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;title&gt;Creating a Filterable Portfolio with jQuery&lt;/title&gt;
  &lt;link href="headerstyle.css" type="text/css" rel="stylesheet" media="screen,projection" /&gt;
  
  
  &lt;/head&gt;
  
  &lt;body&gt;
  
  
       &lt;div id="contained"&gt;
              &lt;div id="logo"&gt;&lt;a href="http://www.altayda.com"&gt;&lt;img src="images/Logo.png"&gt;&lt;/a&gt;&lt;/div&gt;
              &lt;ul id="nav"&gt;
  &lt;li&gt;&lt;a href="http://www.altayda.com/test2"&gt;Works&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="about.php"&gt;About me&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Contact&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  
          &lt;/div&gt;
   &lt;/body&gt;
   &lt;/html&gt;
  </code></pre>
  
  <p><strong>Header style</strong></p>
  
  <pre><code> body {
      margin: 0;
      padding: 0;
      text-align:left;
  
   }
  
  
   ul#nav {
  list-style-type: none;
  height: 80px;
  width: 350;
  margin: auto;
  margin-left: 555px;
  position:absolute;
  top: 159px;
  
  }
    li {
  float: left;
  }
  
   ul#nav a{
  
  padding-right: 20px;
  padding-left: 20px;
  display: block;
  line-height: 80px;
  text-decoration: none;
  font-family: Helvetica;
  font-weight:bold;
  font-size: 18px;
  color: #371C1C;
  }
  
  ul#nav a:hover {
  color: #999 ;
  }
  
  
  
  
  
  
  
  
   #logo
  { 
       float: left;
       top: 161px; 
       position: absolute; 
       width: 183px;
       height: 40px;
       z-index:2;
  } 
  
   #contained { margin: 0px auto 0; overflow: hidden; width: 860px; }
  
  
  
   #Contact 
  {
  
      top: 161px;
      position: absolute;
      width: 67px;
      height: 13px;
      z-index:3;
      font-weight: bold;
      font-family: Helvetica;
      font-size: 19px;
  } 
  
   #Aboutme 
  {
  
      top: 161px;
      position: absolute;
      width: 95px;
      height: 13px;
      z-index:4;
      font-size: 19px;
      font-family: Helvetica;
      font-weight: bold;
  } 
  
   #Works 
  {
  
      top: 161px;
      position: absolute;
      width: 53px;
      height: 13px;
      z-index:5;
      font-family: Helvetica;
      font-size: 19px;
      font-weight: bold;
  } 
  </code></pre>