Non riesco a inserire due box in uno più grande

**xedenx** · 19-01-2010, 16:25

Ciao sono alle prese con un problema che credo sia stupido ma proprio non riesco a capire dove sbaglio.

Voglio creare una pagina con un box grande che contenga due box più piccoli (e poi ciascuno dei due avrà il proprio contenuto).

Il codice che ho scritto è questo:

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

   <head>
      <style type="text/css">
         #box_esterno{
         width: 640px;
         margin: 10px auto;
         border: dashed 2px #ff6600;
         }
         #box1{
         width: 300px;
         float: left;
         }
         #box2{
         width: 300px;
         float: right;
         }
         body{
         font-family: verdana, arial, sans-serif;
         }
         h1{
         font-size: 30px;
         color: #ff0000;
         text-align: center;
         }
         h2{
         font-size: 28px;
         color: #ff0000;
         text-align: center;
         }
         h3{
         font-size: 22px;
         }
         p{
         font-size: 18px;
         }
         a{
         color: #3300ff;
         }
         ul{
         font-size: 18px;
         }
      </style>
   </head>
   <body>
      <div id="box_esterno">
         <div id="box1">
         <h1>TEST</h1>
         </div>
         <div id="box2">
         <h1>TEST</h1>
         </div>
      </div>
   </body>

</html>

Il problema è che sembra che i box piccoli siano all'esterno di quello grande (per il grande ho definito un bordo colorato e praticamente viene mostrato come un rettangolino in alto alla pagina e quindi mi sembra proprio chiaro che non contenga i box piccoli).

Help

**graffithouse** · 19-01-2010, 16:47

aggiungi

codice:

  #box_esterno{ overflow:hidden;}

**xedenx** · 19-01-2010, 16:52

Grazie dell'aiuto.

Se non chiedo troppo, potresti spiegarmi il perchè di quella riga di codice? In fin dei conti i due box interni sono di 300 ciascuno e il grande di 640...

Grazie ancora

**miki003** · 19-01-2010, 17:58

Overflow non da l'effetto che vuoi tu questo è il codice giusto:

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

   <head>
      <style type="text/css">
         #box_esterno{
         width: 640px;
         margin: 10px auto;
         border: dashed 2px #ff6600;
	   clear: both;
         }
         #box1{
         width: 300px;
         float: left;
         }
         #box2{
         width: 300px;
         float: left;
         }
	   #clear {
		   clear: both;
	   }
         body{
         font-family: verdana, arial, sans-serif;
         }
         h1{
         font-size: 30px;
         color: #ff0000;
         text-align: center;
         }
         h2{
         font-size: 28px;
         color: #ff0000;
         text-align: center;
         }
         h3{
         font-size: 22px;
         }
         p{
         font-size: 18px;
         }
         a{
         color: #3300ff;
         }
         ul{
         font-size: 18px;
         }
      </style>
   </head>
   <body>
   <div id="box_esterno">
         <div id="box1">
         <h1>TEST</h1>
         </div>
     <div id="box2">
         <h1>TEST</h1>
      </div>
     <div id="clear"></div>
      </div>
   </body>

</html>

**xedenx** · 19-01-2010, 20:59

Ciao, entrambe le soluzioni proposte funzionano.

Ho provato a ragionarci su e a livello teorico non riesco a capirle:

-la proprietà overflow serve nel caso in cui il contenuto orizzontalmente eccede rispetto la dimensione del contenitore, ma in questo caso i due box interni in totale sono meno del box esterno (intendo come larghezza);

-la proprietà clear serve a far in modo che rispetto ad un certo elemento, nessun altro si posizioni a destra e/o a sinistra e quindi nel mio caso proprio non ha senso.

Ripeto che entrambe le soluzioni funzionano ma se mi poteste spiegare il perchè ve ne sarei estremamente grato.

p.s. ragionando sul mio codice (quello del primo post) mi verrebbe da dire che il problema si "dovrebbe" presentare quando inserisco box2 in quanto box1 sta all'interno di un div e quindi non è possibile inserire qualcosa a fianco. Ma eliminando box2 il risultato non cambia; invece eliminando sia box2 che il float al box1 il risultato è privo di errori cioè box1 si posiziona all'intenro del box grande sulla sinistra senza nessun problema. Credo a questo punto che il nocciolo della questione stia nel comportamento dei float che forse non mi è chiaro (anche se ho scritto ex-novo il codice del tema che utilizzo sul mio blog e non ho mai avuto problemi coi vari float).

Spero possiate darmi delucidazioni.

Grazie ancora

**miki003** · 19-01-2010, 22:48

Nel tuo caso va bene il codice che ti ho dato!

Dalle tu considerazioni penso tu non abbia ben capito l'uso di float e clear.

float
Con questa proprietà è possibile rimuovere un elemento dal normale flusso del docuemnto e spostarlo su uno dei lati (destro o sinistro) del suo elemento contenitore. Il contenuto che circonda l'elemento scorrerà intorno ad esso sul lato opposto rispetto a quello indicato come valore di float. La proprietà non è ereditata.
[list=1]
Valori[*]left. L'elemento viene spostato sul lato sinistro del box contenitore, il contenuto scorre a destra. [*]right. L'elemento viene spostato sul lato destro, il contenuto scorre a sinistra. [*]none. Valore iniziale e di default in mancanza di una dichiarazione esplicita. L'elemento mantiene la sua posizione normale.[/list=1]
clear
La proprietà clear serve a impedire che al fianco di un elemento compaiano altri elementi con il float. Si applica solo agli elementi blocco e non è ereditata.

L'origine di tale proprietà è questa: visto che il float sposta un elemento dal flusso normale del docuemento, è possibile che esso venga a trovarsi in posizioni non desiderate, magari al fianco di altri elementi che vogliamo invece tenere separati. clear risolve questo problema.
Valori
[list=1][*]none. Gli elementi con float possono stare a destra e sinistra dell'elemento. [*]left. Si impedisce il posizionamento a sinistra. [*]right. Si impedisce il posizionamento a destra. [*]both. Si impedisce il posizionamento su entrambi i lati. [/list=1]

ESEMPI

Discussione: Non riesco a inserire due box in uno più grande

Strumenti discussione

Ricerca discussione

Visualizza

Non riesco a inserire due box in uno più grande

Permessi di invio