title: moving body down page
body: <p>I want to move all the content on my page down.. I have included 'padding-top:50px;' in the body tag, which does move all the content down.. ok good. 
  Now I would like to place content in that newly created 50px space. But nothing appears or is cut off because I guess it is out-of-bounds of the page?</p>
  
  <p>I have also made a wrapper div and placed all page content in that and moved it down, but I still get the same effect of not seeing anything in the newly created space. It reacts the same.  </p>
  
  <p>Any suggestions?</p>
  
  <p>thanks</p>
  
  <pre><code>&lt;style&gt;
  #body{
  padding-top: 50px;
  }
  
  #cookieText{
  z-index:10000;
  position:absolute;
  top:-30px;
  left:327px;
  width:270px;
  font-family:Arial, sans serif;
  font-size:9px;
  color:#313131;
  line-height:12px;
  padding:5px 60px 5px 40px;
  border-radius: 2px;
  background-color:#efeff0;
  border: 1px solid #bec2c3;
  }
  #cookieBtn{
  position:absolute;
  top:5px;
  right:10px;
  font-family:Arial, sans serif;
  font-size:10px;
  color:#fff;
  line-height:12px;
  padding:5px 5px 5px 5px;
  border-radius: 5px;
  background-color:#83878f;
  border: 1px solid #7c8089;
  cursor: pointer;
  }
  &lt;/style&gt;
  
  &lt;div id="cookieText"&gt;
  By installing blah blah blah
  &lt;div id="cookieBtn"&gt;&lt;b&gt;Got It!&lt;/b&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;script src="//code.jquery.com/jquery-1.10.2.js"&gt;&lt;/script&gt;
  &lt;script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"&gt;&lt;/script&gt;
  
  &lt;script&gt;
  $("#cookieBtn").click(function(){
  $("#cookieText").stop().animate({"top": "-100px"}, 200);
  });
  $("#cookieBtn").click(function(){
  $("#body").stop().animate({"top": "-50px"}, 200);
  });
  &lt;/script&gt;
  </code></pre>