是什么导致文本区域向上推，而不是在我的菜单底部对齐

这是我一直在做的一个项目。每次写完，我都会删除所有的东西，然后重新开始。问题是，我似乎总有一次不被卡住的时候。

当前问题:是什么导致文本区域重叠的顶部菜单，而不是填充空间?

/* --------- * --------- */
    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; 
    }

</style>

 <div id="menu">
    <div id="logo">Codeplayer</div>
    <button id="button">Run</button>
    <ul class="toggle">
        <li id="htmlLi" class="selected">HTML</li>
        <li>CSS</li>
        <li>JS</li>
        <li id="resultLi" class="selected">Result</li>
    </ul>
    <div class="clear"></div>

    <div class="codeContainer" id="HTMLContainer">
        <textarea>HTML Container</textarea>
    </div>
 <!-- 
    <div class="codeContainer" id="CSSContainer">
        <textarea>HTML Container</textarea>
    </div>
    <div class="codeContainer" id="JSContainer">
        <textarea>HTML Container</textarea>
    </div> -->
<!--         <iframe>Result</iframe>
-->

</div>

<script>
    var windowHeight = $(window).height(); 
    var menuHeight = $("#menu").height(); 
    var containerHeight = windowHeight-menuHeight; 
    $(".codeContainer").height(containerHeight+"px"); 

</script>