title: Positioning issue on different pages
body: <p>Basically I have a web page which contains a slider, a banner, a menu and content.</p>
  
  <p>My HTML code  looks like:</p>
  
  <pre><code>&lt;div class="slideshow"&gt;
      ...
  &lt;/div&gt;
  &lt;div class="banner"&gt;
      ...
  &lt;/div&gt;
  &lt;div class="navigation"&gt;
      ...
  &lt;/div&gt;
  &lt;div class="content"&gt;
      ...
  &lt;/div&gt;
  </code></pre>
  
  <p>and CSS</p>
  
  <pre><code>.banner
  {
      z-index: 1000;
      position:absolute;
      width: 100%;
      top: 0;
      margin-bottom: 140px;
  }
  
  .navigation
  {
      margin: 0px auto 0;
  }
  
  .content
  {
      padding: 0px;
      margin-bottom: 40px;
  }
  </code></pre>
  
  <p>Slider is displayed only on homepage and everything is OK. But if I open a content page <code>div.slider</code> is not displayed (which I do want this) and <code>div.navigation</code>  goes up to page's top and looks under the <code>div.banner</code> since <code>div.banner</code> has <code>z-index</code> and <code>position:absolute</code> (see Actual view 1).</p>
  
  <p>I have tried to add <code>margin-bottom:140px</code> to <code>div.banner</code> but did not work. Then I tried to put <code>margin-top:140px</code> to <code>div.navigation</code> but there is a gap between <code>div.slider</code> and <code>div.navigation</code> in homepage (see Actual view 2).</p>
  
  <p>I want <code>div.slider</code> and <code>div.banner</code> to stick to page's top together but <code>div.slider</code> will be under <code>div.banner</code>. Also when <code>div.slider</code> is not displayed I want <code>div.navigation</code> to be displayed right after <code>div.banner</code> (see Desired view).</p>
  
  <p>You may also want to check <a href="http://jsfiddle.net/Fn5yj/2/" rel="nofollow noreferrer">fiddle</a>
  <img src="https://i.stack.imgur.com/hOubX.jpg" alt="enter image description here"></p>