CREARE SITI WEB in HTML e CSS > Interrompere la fluttuazione
Per risolvere il problema della sovrapposizione dei blocchi, devi far uso della proprietà "clear" con la quale è possibile "cancellare" la fluttazione dei blocchi; ovvero in questo caso della dichiarazione "float: left".
Per eliminare la sovrapposizione dei blocchi (causata dalla dichiarazione "float: left")
1 - assegna al blocco successivo la dichiarazione:
clear: left;
Riassumendo, il codice finora ottenuto è il seguente:
<html>
<head>
<title>Untitled</title>
<style type="text/css">
.nerobianco {background-color: black; color: white }
#intestazione {
width: 700px;
height:50px;
border: 5px solid gray ;
margin: 5px;
}
#piedipagina {
width: 700px;
height:100px;
border: 5px solid gray ;
margin: 5px;
clear: left;
}
#zona2 { width: 150px; float: left; }
#zona3 { width: 400px; float: left;}
#zona4 { width: 150px; float: left; }
</style>
</head>
<body>
<div class="nerobianco" id="intestazione">Zona numero uno</div>
<div id="zona2">Zona numero due</div>
<div id="zona3">Zona numero tre - In questa zona vengono inserite più
parole, ...
</div>
<div id="zona4">Zona numero quattro</div>
<div class="nerobianco" id="piedipagina">Zona numero cinque</div>
</body>
</html>
<head>
<title>Untitled</title>
<style type="text/css">
.nerobianco {background-color: black; color: white }
#intestazione {
width: 700px;
height:50px;
border: 5px solid gray ;
margin: 5px;
}
#piedipagina {
width: 700px;
height:100px;
border: 5px solid gray ;
margin: 5px;
clear: left;
}
#zona2 { width: 150px; float: left; }
#zona3 { width: 400px; float: left;}
#zona4 { width: 150px; float: left; }
</style>
</head>
<body>
<div class="nerobianco" id="intestazione">Zona numero uno</div>
<div id="zona2">Zona numero due</div>
<div id="zona3">Zona numero tre - In questa zona vengono inserite più
parole, ...
</div>
<div id="zona4">Zona numero quattro</div>
<div class="nerobianco" id="piedipagina">Zona numero cinque</div>
</body>
</html>