ciao, voglio ottenere una pagina che si ridimensioni automaticamente a seconda della risoluzione che si adotti, su IE è ok ma su firefox il bottom che dovrebbe essere come il top, invece prende il colore del container. mi sapete dire il perchè??
posto css e pagina.

css:
Codice PHP:
html,body{
margin: 0;
padding: 0;
height: 100%;
background-color:#FFFF00
}

div#container{
    width:900px;
    background-color:#ffffff;
    font:Geneva, Arial, Helvetica, sans-serif;
    height:100%;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: auto;
    margin-left: auto;
    padding:0px;
}

div#top{
background-color:#000000;
width:100%;
height:20%;
margin:auto;
}

div#center{
float:left;
background-color:#ffffff;
width:100%;
height:60%;

}

div#bottom{
background-color:#000000;
width:100%;
height:20%;
margin:auto;

}
/* APERTURA STRUTTURA DEL CENTER */
div#testata{
float:left;
background-color:#FF0000;
width:100%;
height:15%;
}

div#corpo{
float:left;
background-color:#0000FF;
width:100%;
height:70%;
}

div#footer{
float:left;
background-color:#FF0000;
width:100%;
height:15%;
}
/* CHIUSURA STRUTTURA DEL CENTER */ 
pagina.php
Codice PHP:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>SITO.it</title>
<link href="css.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="top">TOP</div>
<div id="center">
<div id="testata">TESTATA della pagina</div>
<div id="corpo">CORPO della pagina</div>
<div id="footer">FOOTER della pagina</div>
</div> 
<div id="bottom">BOTTOM</div>
</div>
</body>
</html>