title: CSS Change body margin size if an element is visible
body: <p>I have a fixed position menu bar at the top of the page which is (lets say) 50px high, the body has a top margin of 50px also. Above the menu bar, there can be an error message which can vary in height. This variation means that the margin ontop of the body will need to change accordingly.</p>
  
  <p>I would like to avoid the use of javascript here but if it's not possible I will use it as a last resort.</p>
  
  <p>An example of what the page will look like is at <a href="http://subjectplanner.co.uk/Me/" rel="nofollow">http://subjectplanner.co.uk/Me/</a> . If you click on the error message, it will dissapear and that is how the page should look.</p>
  
  <p>HTML Code:</p>
  
  <pre><code>&lt;div id="NavWrapper"&gt;
      &lt;div id="NavErrorWrapper" class="Notification"&gt;
          &lt;div id="NavError"&gt;You must be logged in!&lt;/div&gt;
      &lt;/div&gt;
      &lt;div id="NavBar"&gt;
          &lt;a href="/index" id="NavLogo"&gt;&lt;img src="logo.png" /&gt;&lt;/a&gt;
          &lt;div class="HideIfJavaOff"&gt;&lt;a href="#" id="NavMenu"&gt;&lt;img src="menu.png" /&gt;&lt;/a&gt;&lt;/div&gt;
          &lt;div class="MenuClear"&gt;&lt;/div&gt;
          &lt;!-- MENU LIST HERE --&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;!-- End Floating Navigation Bar --&gt;
  &lt;!-- Responsive Wrapper --&gt;
  &lt;div id="MainWrapper"&gt;
      &lt;!-- CONTENT HERE --&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>CSS Code:</p>
  
  <pre><code>#NavWrapper{
      width: 100%;
      z-index: 1;
      top: 0;
      position: fixed;
      height:70px;
  }
  #NavErrorWrapper{
      z-index: 3;
      text-align: center;
      width: 100%;
      padding: 7px;
      background-color: rgb(255, 148, 148);
      border-bottom-style: solid;
      border-bottom-color: rgb(252, 88, 88);
      border-bottom-width: 3px;
      display: block;
  }
  #NavError{
      width: 100%;
      max-width: 900px;
      margin: 0 auto;
  }
  #NavBar{
      overflow: hidden;
      display: block;
      width: inherit;
      max-width: 900px;
      z-index: 2;
      height:auto;
      margin: 0 auto;
      background-color: #fff;
  }
  </code></pre>