title: Overlapping Two DIVS Horizontally
body: <p>Hi I have two divs within a table cell (making a Timeline) and I need them to overlap rather then come under each-other.</p>
  
  <p>The position attribute of all DIVs inside the cell has to remain the same (because of a drag/drop JQUERY plugin I used)</p>
  
  <p><a href="http://jsfiddle.net/ianfc89/4DW6y/2/" rel="nofollow">Link to Fiddle</a></p>
  
  <p><a href="http://jsfiddle.net/ianfc89/JDff9/11/" rel="nofollow">Link to Updated Fiddle</a></p>
  
  <pre><code>       &lt;tr style="border:1px; height:30px;"&gt;
          &lt;td style="border:1px solid black; position:static"&gt;
              &lt;div  style="margin-left:0;width:50px;display:inline;position:relative"&gt;
                  &lt;div style="background-color: green; position:absolute"&gt;
                      Div1
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div style="margin-left:0px;width:20px;display: inline; position:relative"&gt;
                  &lt;div style="background-color: red; position:absolute"&gt;
                  Div2
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/td&gt;
          &lt;td&gt;
          &lt;/td&gt;
      &lt;/tr&gt;
  </code></pre>
  
  <p>I need both DIVs to be start relavtive from the edge of the cell.</p>
  
  <p>Thanks</p>