Float annidati per un layout complesso

**superpelo** · 21-11-2006, 16:07

Ciao a tutti,
vorrei chiedervi come voi generalmente affrontate questo problema:
un layout a diverse colonne + footer ottenuti con float e clear con i blocchi contenuti nelle colonne che utilizzano a loro volta proprietà di float e di clear.

Io ci ho provato e ho a mie spese imparato che il clear ha un comportamento molto particolare: allinea il blocco all'ultimo dei float che lo precedono.

Mi chiedo quindi, è possibile fare un layout come quello che ho stilizzato nell'immagine allegata, con due (o anche molti più) float annidati, o in questo caso non posso prescindere dall'utilizzare una tabelle per realizzare la struttura rossa o quella verde?

Mi piacerebbe sapere come fate in questi casi.

Ciao!

**serialkiller** · 21-11-2006, 17:15

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>superpelo</title>

<style type="text/css">

#head, #footer {clear:both;width:700px;height:100px;border:1px solid green;}

#sinistro, #destro {float:left;width:150px;height:250px;border:1px solid green;}

#centrale {float:left;width:396px;height:250px;border:1px solid green;text}

#intSX, #intDX {float:left;width:170px;height:150px;border:1px solid red;margin-top:20px;}

#intUnder {clear:both;width:342px;height:50px;border:1px solid red;}

</style>

</head>

<body>

<div id="head"></div>

<div id="sinistro"></div>


<div id="centrale">

<div id="intSX"></div>

<div id="intDX"></div>

<div id="intUnder"></div>

</div>


<div id="destro"></div>

<div id="footer"></div>

</body>
</html>

Con beneficio d'inventario, ovvero poi dipende da cosa e come è strutturato il tuo lavoro

**superpelo** · 21-11-2006, 17:55

Meno male che qualcuno risponde, la cosa si fa interessante

Ti ho scaravoltato un po' la frittata: voglio avere le tre colonne contenute in un a box che chiamaiamo body; questa la struttura generale che en deriva:
head
body
footer

Body infatti mi serve per fare in modo che io ci possa mettere uno sfondo, un background-color, delle sfumature, ecc. A seconda dei casi.

Ho colorato le diverse colonne e vi ho inserito dei contenuti.

Ho tolto l'height da ogni box in quanto voglio che il sito si adatti ai contenuti.

La pagina deve essere fluida in larghezza, quindi ho rivisto i float delle colonne.

Ti copio il codice, prova a vedere dove va ad allinearsi "intUnder", quello è il problema di cui parlavo all'inizio.

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>superpelo</title>

<style type="text/css">

#head, #footer {clear:both;border:1px solid green;}

#sinistro {float:left;width:150px;border:1px solid green; background:yellow;}
#destro {float:right;width:150px;border:1px solid green; background:orange;}
#centrale {margin:0px 160px;border:1px solid green; background:#FFDFFF;}

#intSX, #intDX {float:left;width:170px;border:1px solid red;margin-top:20px;}

#intUnder {clear:both;border:1px solid red;}

#body{background-color:gray}

.pareggiatore{
	clear:both;
	height:0px;
	overflow:hidden;
}
</style>

</head>

<body>

<div id="head">head</div>

<div id="body">

<div id="sinistro">


linea</p>

linea</p>

linea</p>

linea</p>

linea</p>

linea</p>

linea</p>

linea</p>

linea</p>

linea</p>


linea</p>

linea</p>

linea</p>

linea</p>

linea</p>

linea</p>

linea</p>

linea</p>

linea</p>

linea</p>
</div>

<div id="destro">DX</div>

<div id="centrale">
<div id="intSX">

linea</p>

linea</p>

linea</p>

linea</p>

linea</p>

linea</p>

linea</p>

linea</p>

linea</p>

linea</p></div>
<div id="intDX">intDX</div>
<div id="intUnder">Io sono intUnder!</div>
</div>

<div class="pareggiatore"></div>
</div>

<div id="footer">Footer</div>

</body>
</html>

VVoVe:

**serialkiller** · 21-11-2006, 18:36

Se elimini width a "centrale" non flotta più e quindi si incasina tutto il problema è solo li.

ho usi dimensioni in em o in percentuale per tutti i box o solo quello centrale a cui hai tolto la dimensione, vedi che funziona.

Tieni presente anche che div vuoti come "pareggiatore" non hanno senso e tantomeno annidare millemila div uno dentro all'altro, al massimo fai flottare dei paragrafi.

**superpelo** · 22-11-2006, 12:39

Hai ragione, la mia soluzione non funziona, è per questo che sto tentando di capire se esiste un metodo..

Come si risolve allora questo problema (problema nel senso di esercizio scolastico)?

Devo avere un layout fluido in larghezza, che va a occupare tutto lo spazio disponibile MA con le dimensioni delle colonne laterali fisse. Cioè è la colonna centrale quella che subisce il ridimensionamento orizzontale.
Quindi nn posso prefissare a priori la larghezza % delle 3 colonne. Devo avere infatti le due colonne laterali larghe 150px e quella centrale larga quanto necessario.

In più le tre colonne devono stare dentro un div denominato "body" che mi serve per fare magheggi vari con il background. E dato che tale div in altezza deve essere lungo tanto quanto la più lunga delle tre colonne uso "pareggiatore".

Ultima cosa, le colonne a loro volta devono contenere float e clear.

Io non riesco a trovare una soluzione a tutto ciò, se non tornare alle tabelle. Cosa peraltro che vorrei evitare.

Che ne dite?

**serialkiller** · 22-11-2006, 14:51

dai uno sguardo qui

http://blog.html.it/layoutgala/indexIta.html

Discussione: Float annidati per un layout complesso

Strumenti discussione

Ricerca discussione

Visualizza

Float annidati per un layout complesso

Permessi di invio