title: How to replace a div container with javascript
body: <p>I must have a little design in javascript.</p>
  
  <p>I have a menu with 5 entrys and only 1 HTML-page.</p>
  
  <p>So I will have a content-div and enabled and disabled different static content in it, each menu-entry is another content.
  I tried with 5 divs and disable 4 of them and enable 1, but the  element under each other means every div is like a <br> - enabled or not, so the "content" is moving then.</p>
  
  <p>Hope its understandable.</p>
  
  <p>Here is the code so far:</p>
  
  <pre><code>     &lt;html&gt;&lt;head&gt;&lt;title&gt;Des Einsame-Katerchen's kleine Homepage&lt;/title&gt;
  &lt;style type="text/css"&gt;
  a:link { font-weight:bold; color:blue; text-decoration:none; }
  a:visited  { font-weight:bold; color:blue; text-decoration:none; }
  a:focus { font-weight:bold; color:blue; text-decoration:none; }
  a:hover  { font-weight:bold; color:blue; text-decoration:line-through; }
  a:active { font-weight:bold; color:blue; text-decoration:none; }
  
  h1:focus { background-color:red; }
  h1:hover { background-color:silver; }
  h1:active { background-color:green; }
  &lt;/style&gt;
  &lt;script&gt;
  
  function an(id)
  {
  
  document.getElementById('start').style.visibility = 'hidden';
  document.getElementById('start').style.height = '0px';
  document.getElementById('me').style.visibility = 'hidden';
  document.getElementById('me').style.height = '0px';
  document.getElementById('rpg').style.visibility = 'hidden';
  document.getElementById('rpg').style.height = '0px';
  document.getElementById('musik').style.visibility = 'hidden';
  document.getElementById('musik').style.height = '0px';
  document.getElementById('screens').style.visibility = 'hidden';
  document.getElementById('screens').style.height = '0px';
  
  document.getElementById(id).style.visibility = 'visible';
  document.getElementById(id).style.height = '500px';
  }
  
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body style="         "  &gt;
  
  &lt;div style="width=100%; text-align:center; border: 1px red solid; height:40px;"&gt;
  &lt;div style="float:left; width:100px;"&gt;&lt;a href="#" OnClick="an('start')" &gt;Startseite&lt;/a&gt;&lt;/div&gt;
  &lt;div style="float:left; width:100px;"&gt;&lt;a href="#" OnClick="an('me')" &gt;Über mich&lt;/a&gt;&lt;/div&gt;
  &lt;div style="float:left; width:100px;"&gt;&lt;a href="#" OnClick="an('rpg')" &gt;RPG-Chars&lt;/a&gt;&lt;/div&gt;
  &lt;div style="float:left; width:100px;"&gt;&lt;a href="#" OnClick="an('musik')" &gt;Musik&lt;/a&gt;&lt;/div&gt;
  &lt;div style="float:left; width:150px;"&gt;&lt;a href="#" OnClick="an('screens')" &gt;Knuddels-Screens&lt;/a&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;br&gt;
  &lt;div id="start" style="border:1px red solid; width:500px; height:500px; overflow: visible; " &gt;
  a
  &lt;/div&gt;
  &lt;div id="me"  style="border:1px red solid; width:500px; height:0px; overflow: visible; visibility: hidden; " &gt;
  b
  &lt;/div&gt;
  &lt;div id="rpg"  style="border:1px red solid; width:500px; height:0px; overflow: visible; visibility: hidden; " &gt;
  c
  &lt;/div&gt;
  &lt;div id="musik"  style="border:1px red solid; width:500px; height:0px; overflow: visible; visibility: hidden; " &gt;
  d
  &lt;/div&gt;
  &lt;div id="screens"  style="border:1px red solid; width:500px; height:0px; overflow: visible; visibility: hidden; " &gt;
  e
  &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>