title: how to make a fixed position div relative to another div?
body: <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;link href="css/bootstrap.css" rel="stylesheet" type="text/css" /&gt;
  &lt;link href="css/css.css" rel="stylesheet" type="text/css" /&gt;
  &lt;script src="js/jquery-1.10.2.min.js"&gt;&lt;/script&gt;
  &lt;script language="javascript" src="js/bootstrap.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div class="myContainer"&gt;
    &lt;ul class="nav nav-tabs" &gt;
      &lt;li class="active"&gt;&lt;a href="#chat" data-toggle="tab"&gt;Chat&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#users" data-toggle="tab"&gt;Users&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
    &lt;div class="tab-content" style="height:500px"&gt;
      &lt;div class="tab-pane active" id="chat"&gt;
        &lt;div style="" &gt;
          &lt;? include("lorem.php");?&gt;
          &lt;div id="banner" style="position:fixed;top:560px;height:30px;width:100%;background-color:#F00"&gt; &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="tab-pane" id="users"&gt; dd... &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>That works fine: problem is that </p>
  
  <pre><code>    &lt;div id="banner" style="position:fixed;**top:560px**;height:30px;width:100%;background-color:#F00"&gt; &lt;/div&gt;
  </code></pre>
  
  <p>is absolute positionned at top:560px.</p>
  
  <p>If <code>&lt;div class="tab-content" style="height:500px"&gt;</code>has another height, I need to absolute position the banner !</p>
  
  <p>Th goal is to create that template:</p>
  
  <p>1) bootstrap tabs</p>
  
  <p>2) a div inside one tab which is a div that will contain a chat</p>
  
  <p>3) at bottom of that div, stuck a banner div which will contain the chat input text</p>
  
  <p>regards</p>
  
  <p>Here comes the desired result<img src="https://i.stack.imgur.com/JvjeQ.jpg" alt="enter image description here"></p>