Ciao,
ecco a te il codice di cui hai bisogno, prendi spunto e adattalo in base alle tue esigenze:
HTML
codice:
<html>
<head>
<title>Laboratorio</title>
<link href="index.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="sopra">
<div id="sx">
Blocco superiore sinistro
</div>
<div id="dx">
Blocco superiore destro
</div>
</div>
<div id="sotto">
Blocco inferiore
</div>
</div>
</body>
</html>
ed il CSS (index.css nella stessa directory del file html):
codice:
#container{
width: 400px; /* stabiliscono le dimensioni del genitore... */
height: 200px; /* ...a seconda di questi, i blocchi si adatteranno di conseguenza */
border: 2px solid black; /*grafico, puoi toglierlo tranquillamente */
}
#sopra{
width: 100%; /* percentuali per renderli elastici */
height: 50%;
}
#sx{
float: left; /* necessario per i div inline */
width: 50%;
height: 100%;
background-color: lime; /* grafico, puoi toglierlo tranquillamente */
}
#dx{
float: left; /* necessario per i div inline */
width: 50%;
height: 100%;
background-color: green; /* grafico, puoi toglierlo tranquillamente */
}
#sotto{
width: 100%;
height: 50%;
background-color: yellow; /* grafico, puoi toglierlo tranquillamente */
}
In sostanza ho usato due div rettangolari dentro al container, dopodiché all'interno del superiore ho inserito i due div affiancati.
Il sotto-rettangolo contenitivo superiore è necessario, dal momento che se non ci fosse, il rettangolo inferiore si nasconderebbe sotto a quelli superiori e non è bello.
L'intero codice è progettato in maniera tale da essere elastico e si adatta alle dimensioni del container padre. Se modifichi le dimensioni del "#container" si modificano i div interni di conseguenza.
Per cambiare il rapporto in altezza dei div "sopra" e "sotto" è sufficiente cambiargli la percentuale, per esempio:
codice:
#sopra{
...
height: 30%; /* questo sarà più basso */
}
#sotto{
...
height: 70%; /* questo sarà più alto */
}
Ovviamente la somma deve essere 100 sennò lasceranno dei buchi.
Infine puoi fare se vuoi il container stesso percentuale, vedi tu.
hth
ciauz
Permessi di invio
Rispondi quotando