Le mie div sono fuori servizio e allineate in fondo alla pagina? - html, css

Ecco il codice nel corpo del mio HTML:

<div id="mtx_bckgd">
<p id="mtx_txt"></p>
</div>
<div class="outerdiv" id="headerbox">
<div id="uwlogo">
<img src="/images/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>

Ecco il relativo 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%;
}

L'headerbox e la barra di navigazione dovrebbero essere allineati in cima ai rispettivi ordini. Il piè di pagina dovrebbe essere allineato in basso. Quello che sta succedendo sta facendo il mio footer SOPRA gli altri due e tutto allineato in basso?

risposte:

Rimuovi il:

height: 100%;

dall'elemento #mtx_bckgd

Inoltre, niente a che fare con il problema, ma cambiare

<img src="/images/uwlogo.png" height="50px">

a

<img src="/images/uwlogo.png" height="50px" />

Poiché il tag dell'immagine non è chiuso

Il mtx_bckgd occupa il 100% di larghezza e il 100%altezza (quindi tutto il tuo schermo). Il footer è assoluto nella parte inferiore, quindi è sopra il mtx_bckgd e nella parte inferiore dello schermo.Infine, gli altri due tag div, sono in fondo perchè il mtx_bckgd sta occupando tutto lo schermo e devono essere dopo esso.

Quale layout vuoi raggiungere?