title: positioning a div at bottom of the container element
body: <p>Layout of the web page i am designing is like this fiddle : <a href="http://jsfiddle.net/5sTub/" rel="nofollow noreferrer">http://jsfiddle.net/5sTub/</a></p>
  
  <p><strong>EDIT: NOTE: I am not trying to get a sticky footer. i just want to position it at bottom of the page. Please see the fiddle before you answer</strong></p>
  
  <p>i am trying to position the footer at the bottom of the page but am unable to as you can see in the link above. i have tried everything i found on the internet including setting the container element's position:relative; and the footer's <code>position:absolute;</code> and <code>bottom:0;</code> but nothing seems to be working, in fact, if you add the container div to the code and make its <code>position:relative;</code>, and add the following css to footer : <code>position:absolute; bottom: 0;</code> , the footer seems to disappear somewhere. I've been struck on this problem since quiet a long time and the only solution i've found so far is to set my header and my content and the footer's <code>position:static;</code> , which dosent server the purpose and ruins whole layout and looks quiet ugly. I want to avoid the use of javascript. please help, thanks in advance. </p>
  
  <p><strong>EDIT: Illustration of what i need:</strong>
  <img src="https://i.stack.imgur.com/z8ShD.png" alt="enter image description here"></p>
  
  <p>where blue is the footer, dark blue is header, light blue is actual content and pink one is a sticky div. i do not want to make footer sticky, but i want it to be like one you'll find on a normal page, only problem is that it dosent stay at the bottom of the page (see the <a href="http://jsfiddle.net/5sTub/" rel="nofollow noreferrer">fiddle</a>)</p>