Salve, sto sperimentando per la prima volta un layout elastico ma non devo aver capito bene come funziona ??

  • Ho un margine superiore che non mi sembra di aver impostato
  • Ho uno shift verso il basso del div content con relativo shift del footer
  • Ho dovuto impostare un'altezza di 51.92em su un'altezza massima di 64 em anche se penso sia dovuto alla presenza delle barre degli strumenti di FF


Allego l'immagine del "risultato" ed i codici del file CSS e del file HTML
codice:
body
{
    font-size: 1em;
    padding: 0;
    margin: 0 auto;
}

html
{
    font-size:100%;
}
div#c
{
    margin: 0 auto;
    height:51.92em;
    width:80em;
    background-color:#4682b4;
}
div#h
{
    margin:0 auto;
    height:7.788em;
    width:80em;
    background-color:red;
    padding:0;
}
div#n
{
    float:left;
    margin:0 auto;
    height:41.536em;
    width:12em;
    background-color:white;
    padding:0;
    margin:0 auto;
}
div#e
{
    float:right;
    margin:0 auto;
    height:41.536em;
    width:12em;
    background-color:yellow;
    padding:0;
    margin:0 auto;
}
div#b
{
    margin:0 auto;
    height:41.536em;
    width:56em;
    background-color:tan;
    padding:0;
    margin:0 auto;
}
div#f
{
    clear:both;
    margin:0 auto;
    height:2.596em;
    width:80em;
    background-color:green;
    padding:0;
}
codice:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="en">
<head>
    <title></title>
    <link rel="stylesheet" type="text/css" href="prova.css">
</head>
<body>
    <div id="c">
        <div id="h">
            <h1>CIAO</h1>
        </div>
        <div id="n">
            <ul>[*]pippo[*]pippo[*]pippo[*]pippo[*]pippo[/list]
        </div>
        <div id="e">
            <ul>[*]pippo[*]pippo[*]pippo[*]pippo[*]pippo[/list]
        </div>
        <div id="b">
            

 Questo è un testo di prova</p>
        </div>
        <div id="f">
            @Email
        </div>
    </div>
</body>
</html>



Chiedo Comprensione per l'ignoranza manifesta

Grazie per le spiegazioni e consigli, Daniele