Мои элементы не в порядке и выровнены внизу страницы?

Здесь код в теле моего HTML:

<div id="mtx_bckgd">
    <p id="mtx_txt"></p>
</div>
<div class="outerdiv" id="headerbox">
    <div id="uwlogo">
        <img src="uwlogo.png" height="50px">
    </div>
    <div id="JaminWEB">
        <h1>JaminWEB</h1>
    </div>  
</div>
<div class="outerdiv" id="navbar">
    <a href="runningCalculator.html"><input type="button" class="navbutton" value="Running Calculator"/></a>
    <input type="button" class="navbutton"/>
    <input type="button" class="navbutton"/>
</div>
<div class="outerdiv" id="footer">
    <p>Last modified: March 21st, 2014</p>
</div>

Здесь соответствующий CSS:

#mtx_bckgd
{
    font-family: "Courier New";
    height: 100%;
    width: 100%;
    padding: 0px;
    margin: 0px;

    z-index: -1;
    background: linear-gradient(180deg, #39275b, #FFF);
}

#headerbox
{
    width: 80%;
    height: 50px;
}

#navbar
{
    width: 80%;
    height: 30px;
}

#footer
{   
    position: absolute;
    bottom: 0px;
    height: 100px;
    width: 80%;
}

Заголовки и navbar должны быть выровнены вверху в их соответствующих заказах. Нижний колонтитул должен быть выровнен внизу. Что происходит, это сделать мой нижний колонтитул ВЫШЕ двух других, и все выровнено внизу?