title: Taking exactly 29px off of the top of my div without moving it down?
body: <p>I have a website layout consisting of 4 divs.</p>
  
  <pre><code>&lt;div class="global"&gt;
  &lt;div class="content"&gt;
  &lt;/div&gt;
  &lt;div class="top"&gt;
  &lt;/div&gt;
  &lt;div class="footer"&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>the  has the following style applied</p>
  
  <pre><code>div.top{
  position:fixed;
  top:0px;
  width:100%;
  height:28px;
  background-color:rgb(55,55,55);
  border-bottom:1px solid black;
  }
  </code></pre>
  
  <p>the  has the following style applied</p>
  
  <pre><code>div.footer{
  position:fixed;
  float:right;
  bottom:0px;
  left:87.5%;
  border:1px solid:black;
  border-bottom:0;
  }
  </code></pre>
  
  <p>and the  has this</p>
  
  <pre><code>div.content{
  position:absolute;
  bottom:0;
  top:28px;
  width:100%;
  background:transparent;
  margin:auto;
  padding:0;
  }
  </code></pre>
  
  <p>the problem I am having is with the content div, I want it to start directly below the top and continue down the rest of the page, however it goes over the bottom of the page by exactly however many px I set the position of top too. Now as I'm using px for the size of the top, I can't apply a percentile, so what would be the best way of doing this using only css.</p>
  
  <p>The website I need this for is <a href="http://www.andysinventions.info/test/" rel="nofollow">http://www.andysinventions.info/test/</a> and the problem can be seen on the tab labelled "Forums"</p>
  
  <p>tl;dr how can I stop my div going over the page boundaries?</p>