title: What is causing the text area to push up instead of aligning at the bottom of my menu?
body: <p>This is a project I've been working on. Each time I finish it, I delete and everything and start over. The problem is, I can't seem to do it without getting stuck at least once. </p>
  
  <p>Current problem: What is causing the text area to overlap the top menu instead of filling the space? </p>
  
  <p><a href="http://jsfiddle.net/1dan6dry/" rel="nofollow">http://jsfiddle.net/1dan6dry/</a></p>
  
  <p></p>
  
  <pre><code>/* --------- * --------- */
  
      body, html {
  
      }
  
  /* --------- MENU --------- */
  
      #menu {
          height: 50px;
          width: 100%; 
          background-color: #EBE9EB; 
          box-shadow: 1px 1px 1px #000000;
      }
  
  
  
  
  /* --------- LOGO --------- */
  
      #logo {
          float: left;
          font-weight: bold; 
          margin-left: 15px; 
          font-size: 20px; 
          height: 20px;
          text-shadow: 1px 2px #000000; 
          color: #9d9d9a;
          position: relative; 
          top: 12px; 
      }
  
  /* --------- BUTTON --------- */
  
      #button {
          float: right;
          width: 50px;
          height: 30;
          background-color: #7E7E7E; 
          position: relative;
          top: 12px;
          right: 15px;  
          font-family: helvetica; 
  
      }
  
  
  
  /* --------- TOGGLE --------- */
  
      .toggle {
          height: 35px;
          width: 348.9px;
          list-style: none; 
          font-weight: bold; 
          font-family: helvetica; 
          position: relative; 
          margin: 0 auto; 
          top: 7px; 
          border: 1px solid black;
          border-radius: 5px; 
          line-height: 35px; 
      }
  
  /* --------- LI --------- */
  
      .toggle li {
          float: left; 
          padding-left: 30px; 
          padding-right: 30px; 
          text-align: center; 
          line-height: 35px; 
          border-right: 1px solid black;
  
  
      }
  
      #resultLi {
          border-right: none;
  
      }
  
      #htmlLi {
          margin-left: -40px; 
  
      }
  
  /* --------- SELECTED --------- */
  
      .selected {
          background-color: #7E7E7E; 
  
      }
  
  /* --------- CONTAINERS --------- */
  
      #CSSContainer, #JSContainer {
          display: none;
      }
  
      .codeContainer {
          height: 100%;
          width: 50%;
          padding: 0; 
          margin: 0; 
          float: left; 
          position: relative;
  
  
      }
  
      .codeContainer textarea {
          height: 100%;
          width: 100%; 
          position: relative; 
      }
  
  
  
  &lt;/style&gt;
  </code></pre>
  
  <p></p>
  
  <p></p>
  
  <pre><code> &lt;div id="menu"&gt;
  
      &lt;div id="logo"&gt;Codeplayer&lt;/div&gt;
  
      &lt;button id="button"&gt;Run&lt;/button&gt;
  
      &lt;ul class="toggle"&gt;
          &lt;li id="htmlLi" class="selected"&gt;HTML&lt;/li&gt;
          &lt;li&gt;CSS&lt;/li&gt;
          &lt;li&gt;JS&lt;/li&gt;
          &lt;li id="resultLi" class="selected"&gt;Result&lt;/li&gt;
  
      &lt;/ul&gt;
  
      &lt;div class="clear"&gt;&lt;/div&gt;
  
  
      &lt;div class="codeContainer" id="HTMLContainer"&gt;
          &lt;textarea&gt;HTML Container&lt;/textarea&gt;
      &lt;/div&gt;
   &lt;!-- 
      &lt;div class="codeContainer" id="CSSContainer"&gt;
          &lt;textarea&gt;HTML Container&lt;/textarea&gt;
      &lt;/div&gt;
  
      &lt;div class="codeContainer" id="JSContainer"&gt;
          &lt;textarea&gt;HTML Container&lt;/textarea&gt;
      &lt;/div&gt; --&gt;
  
  &lt;!--         &lt;iframe&gt;Result&lt;/iframe&gt;
  --&gt;
  
  
  
  &lt;/div&gt;
  
  
  &lt;script&gt;
  
      var windowHeight = $(window).height(); 
      var menuHeight = $("#menu").height(); 
      var containerHeight = windowHeight-menuHeight; 
      $(".codeContainer").height(containerHeight+"px"); 
  
  
  &lt;/script&gt;
  </code></pre>
  
  <p></p>