[ CSS ] problemi di FLOAT

**gordian** · 19-05-2005, 16:04

Ciao a tutti,

domino ancora molto poco i CSS di livello 2, ma sto cercando di perfezionarmi...

Mi è capitato, ad esempio, di voler distribuire all'interno di un box principale, altri 3 box di cui uno a sinistra e altri 2 a destra (uno sotto all'altro).
Se il box di sinistra è + alto della somma dei 2 box di destra va tutto bene e il layout resta impaginato; se però il box di sinistra è + basso del primo box di destra, succede che il secondo box di destra non rimane + allineato al primo.

Vi posto un codice di esempio così potete capire immediatamente il problema:

codice:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
#box_principale 
{  
background-color: #666666; 
padding-top: 5px; 
padding-right: 5px; 
padding-bottom: 5px; 
padding-left: 5px; 
height: 500px; 
width: 500px;
}

#box_sinistro 
{  
background-color: Snow; 
float: left; 
height: 200px; 
width: 300px;
}

#box_destro_alto 
{  
background-color: PeachPuff; 
float: right; 
height: 250px; 
width: 150px;
}

#box_destro_basso
{  
background-color: LightBlue; 
float: right; 
height: 100px; 
width: 150px;
margin-top: 5px;
}

-->
</style>
</head>

<body>
<div id="box_principale">
   <div id="box_sinistro">sinistra</div>
   <div id="box_destro_alto">destra in alto</div>
   <div id="box_destro_basso">destra in basso</div>
</div>
</body>
</html>

Quale proprietà manca negli stili per forzare comunque il terzo box sulla destra?

Grazie.

**deivnet** · 19-05-2005, 17:03

Puoi o racchiudere i box di destra in un box unico
e quindi sarà questo box ad allinearsi con quello a sinistra,
oppure indichi la posizione "left" da cui devono partire i box di destra

**gordian** · 19-05-2005, 17:10

Originariamente inviato da deivnet
Puoi o racchiudere i box di destra in un box unico

Se devo "arrampicarmi" in questo modo, uso le tabelle piuttosto.
Tra i vantaggi dei CSS dovrebbero esserci quelli di scrivere meno codice e di evitare annidamenti su annidamenti...

Originariamente inviato da deivnet
oppure indichi la posizione "left" da cui devono partire i box di destra

Come si scriverebbe questa alternativa?

**deivnet** · 19-05-2005, 17:18

Nello style imposti la proprietà left che indica la distanza dal bordo sinistro della pagina dell'oggetto che vuoi mostrare,
questo con posizionamento assoluto, con posizionamento relativo indica la distanza dall'oggetto più vicino che sta alla sinistra dell'oggetto da visualizzare.
Non sono sicuro della buona riuscita ma è un tentativo

Nel tuo caso :

codice:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
#box_principale 
{  
background-color: #666666; 
padding-top: 5px; 
padding-right: 5px; 
padding-bottom: 5px; 
padding-left: 5px; 
height: 500px; 
width: 500px;
}

#box_sinistro 
{  
background-color: Snow; 
float: left; 
height: 200px; 
width: 300px;
}

#box_destro_alto 
{  
background-color: PeachPuff; 
float: right; 
height: 250px; 
width: 150px;
left : 300px;
position : absolute;
}

#box_destro_basso
{  
background-color: LightBlue; 
float: right; 
height: 100px; 
width: 150px;
margin-top: 5px;
left : 300px;
position : absolute;
}

-->
</style>
</head>

<body>
<div id="box_principale">
   <div id="box_sinistro">sinistra</div>
   <div id="box_destro_alto">destra in alto</div>
   <div id="box_destro_basso">destra in basso</div>
</div>
</body>

</html>

**gordian** · 19-05-2005, 17:30

Originariamente inviato da deivnet
Nello style imposti la proprietà left che indica la distanza dal bordo sinistro della pagina dell'oggetto che vuoi mostrare,
questo con posizionamento assoluto, con posizionamento relativo indica la distanza dall'oggetto più vicino che sta alla sinistra dell'oggetto da visualizzare.
Non sono sicuro della buona riuscita ma è un tentativo

Ti ringrazio, ma non funziona: rimane sovrapposto al box superiore.

**deivnet** · 19-05-2005, 17:33

Giustamente... ti ho fatto mettere il position : absolute
e de default la proprietà top è 0.

Prova a togliere position : absolute e a ridurre il valore della proprietà left... da 300 a 5 per esempio

**gordian** · 19-05-2005, 17:38

Originariamente inviato da deivnet
Giustamente... ti ho fatto mettere il position : absolute
e de default la proprietà top è 0.

Prova a togliere position : absolute e a ridurre il valore della proprietà left... da 300 a 5 per esempio

Diventa praticamente identico al mio esempio originale :master:

**deivnet** · 19-05-2005, 17:43

Devi giocare con queste proprietà e vedere gli effetti che
ti portano, prova ad aumentare i valori di left e vedere cosa fa...

**gordian** · 19-05-2005, 17:56

Originariamente inviato da deivnet
Devi giocare con queste proprietà e vedere gli effetti che
ti portano, prova ad aumentare i valori di left e vedere cosa fa...

Ma il fatto è che, ammesso che riesca a trovare la combinazione giusta, il tuo consiglio funzionerebbe solo su dei box a grandezza fissa... se io realizzassi un sito a dimensione %ntuale, mi troverei in braghe di tela...

**deivnet** · 19-05-2005, 17:59

Se non ricordo male la proprietà left prende anche valori percentuali.

La mia è solo una delle possibili soluzioni, l'altra è quella di
creare due box affiancati simil tabelle... poi altre non me ne vengono spero che qualcun'altro abbia soluzioni diverse dalle mie
da proporti.

Discussione: [ CSS ] problemi di FLOAT

Strumenti discussione

Ricerca discussione

Visualizza

[ CSS ] problemi di FLOAT

Permessi di invio