Salve ragazzi!
Ho bisogno di realizzare una pagina strutturata così:
-Riga di testa (A: 100px)
-Seconda riga (A: 50px)
-Parte centrale:
||||-Colonna sx (L: 160px)
||||-Contenuto (L: il rimanente spazio)
||||-Colonna dx (L: 160px)
-Footer (A: 20px)
Vorrei che le due righe e il footer fossero larghi quanto la finestra, e che la parte centrale fosse alta tutto lo spazio rimanente, riempiendo così lo schermo.
Ho scritto allora questo codice:
codice:
<html>
<head>
<link href='divisori.css' rel='stylesheet'>
<title>Login</title>
</head>
<BODY id="body-margin">
<div id="container">
<div id="header1">
</div>
<div id="header2">
</div>
<div id="content">
<div id="left-col">
</div>
<div id="center-col">
</div>
<div id="right-col">
</div>
</div>
<div id="footer">
</div>
</div>
</body>
</html>
Mentre questo è il foglio di stile esterno:
codice:
#body-margin {
margin: 0px;
height: 100%;
width: 100%;
}
#container {
position: relative;
height: 100%;
width: 100%;
}
#footer {
position: absolute;
bottom: 0;
height: 20px;
width: 100%;
background-color: blue;
}
#header1 {
position: absolute;
top: 0;
height: 100px;
width: 100%;
background-color: green;
}
#header2 {
position: absolute;
top: 100;
height: 50px;
width: 100%;
background-color: lightblue;
}
#content {
position: absolute;
top: 150px;
bottom: 20px;
width: 100%;
}
#left-col {
position: absolute;
left: 0px;
height: 100%;
width: 160px;
background-color: yellow;
}
#right-col {
position: absolute;
right: 0px;
height: 100%;
width: 160px;
background-color: aqua;
}
#center-col {
position: absolute;
top: 0;
right: 160px;
bottom: 0;
left: 160px;
height: 100%;
background-color: red;
}
Se lo provate su Mozilla funziona benissimo, ma siccome IE è il più diffuso... sai com'è... lì non funziona...
Le tre colonne centrali mi vengono riempite di colore solo se ci sono contenuti, mentre vorrei che apparrissero anche se vuote.
Sapete dove devo correggere il codice??
Grazie per l'aiuto!