Float dentro float problema

**SGr33n** · 18-07-2006, 20:48

Ciao a tutti,

Devo realizzare uno schema come quello in allegato.

Ora la parte verde e quella gialla sono in float: left e dopo di esse vi è un <br style="clear: both;"> per interrompere il float.

stesso discorso per la parte nera e quella rossa.

Su Firefox tutto ok, ma internet explorer mi riporta la parte nera a capo di quella verde e gialla, come se volesse allineare la nera e la rossa alla gialla e la nera, solo che non trovando spazio li mette a capo.

Ho provato utilizzando nel secondo float un float: right, ma non mi trovo molto, preferirei utilizzare il left, c'è un modo ?

Grazie 1000

**fcaldera** · 18-07-2006, 21:00

Scusa, ma come possiamo aiutarti se non posti nulla del codice che usi?
la cosa più semplice è postare un esempio semplice (un file xhtml/html con il suo css) così da vederne il comportamento sui vari browser e correggerlo su Explorer

**ashtur1** · 18-07-2006, 21:04

non so il tipo di contenuti nè di che sito si tratta, cmq dovresti differenziare i CSS per il semplice fatto che ie non segue gli standard, mozilla invece si e quindi spesso e volentieri vanno in conflitto.

Se non vuoi utilizzare due fogli di stile differenti potresti provare a posizionare il tutto in maniera assoluta (però non so esattamente quello che andra nei due boxettini che floattano)...

**SGr33n** · 18-07-2006, 21:06

Pensavo fosse qualcosa di noto :P

ecco il codice:

css

codice:

#main {
	width: 670px;
}
#verde {
background: green;
	width: 388px;
	padding: 12px 12px 50px 12px;
	margin: 0;
	float: left;
}

#giallo {
background: yellow;
	width: 234px;
	padding: 12px;
	margin: 0;
	float: left;
}

#nero, #rosso {
	margin-right: 8px;
	float: left;
}

#nero { background: #000; }
#rosso { background: #FF0000; }

html

codice:

<div id="main">
<div id="verde">

prova prova prova prova prova prova prova prova

</div>

<div id="giallo">



	prova prova prova
	


	<div id="nero">
	prova nero
	</div>
	
	<div id="rosso">
	prova rosso
	</div><br style="clear: both;">

	Prova prova prova prova

</div>

<br style="clear: both;">
</div>

Grazie

**SGr33n** · 18-07-2006, 21:16

Nella prova funziona... proverò a risolverlo da solo, grazie 1000.

**fcaldera** · 18-07-2006, 21:26

ecco qui, copia e incolla

codice:

<html>
<head>
<style>

#main {
  width: 670px;
  /* clearing con overflow */
  height: auto;     
  overflow: hidden; 
}


#verde {
	float: left;
	width: 388px;
    background : #0c0;
    padding   : 10px 0;
}

#giallo {
	width: 282px;
	float: left;    
    background : #ffc;
    padding   : 10px 0;
}

#nero, #rosso {
	float: left;
    display : inline;
	margin  : 0px 14px;
    background : #c00;
    color       : #fff;
    width       : 100px;
}

#nero {
    background : #000;
}
</style>
<head>

<body>
<div id="main">

    <div id="verde">
        verde
    </div>

    <div id="giallo">
        
        <div id="nero">
            nero
        </div>
        <div id="rosso">
            rosso
        </div>

    </div>

</div>
</body>
</html>

Alcune precisazioni:

1) ho inserito i colori per capirmi, tu li puoi modificare come preferisci

2) in tutti i blocchi flottati con margine non nullo inserisci sempre display: inline
(cerca nel forum o su google "float double margin", questo è un bug noto per explorer)

3) i float dovrebbero avere sempre almeno la larghezza definita

4) @ashtur1: l'utilizzo dei fogli di stile condizionali va bene, ma solo se il problema non si può risolvere con un solo foglio di stile (non è questo il caso) altrimenti se ne farebbe abuso (e comunque il sistema varrebbe solo se l'anomalia si verifica solo in Explorer).

Ciao
-Fab-

Edit: dimenticavo

5) se puoi utilizza un clearing migliore rispetto all'overflow... sul forum ho pubblicato da poco una pillola su questo argomento.

Ri-ciao

**ashtur1** · 18-07-2006, 22:01

come mai se ne farebbe abuso?

sinceramente pure io preferisco quando possibile utilizzarne 1 solo (=meno fatica

) , però quando devi fare layout un più complessi non sempre (almeno io) riesci a far andare d'accordo ie e mozilla e opera...(io spero che questo sia un metodo oggettivo in maniera tale che anche quando oe si decidera a seguire gli standard, se mai succedrà)

**fcaldera** · 18-07-2006, 22:09

il mio discorso era generale:

Se si utilizza un foglio di stile condizionale per risolvere un problema altrimenti irrisolvibile, ok.

Se puoi risolverlo con un unico css tanto vale trovare il css giusto (o strutturare meglio l'xhtml) piuttosto che "aggirare" subito il problema usando più css. Mi sembrava che nel tuo post consigliassi di usare subito questa soluzione, da cui l'appunto, tutto qui

Circa il rispetto degli standard di IE, ne deve passare di acqua sotto i ponti mi sa...

**SGr33n** · 18-07-2006, 22:41

Probilema risolto anche sull'originale, ma c'è una cosa strana: Internet explorer aveva ragione... c'era un errore di dimensioni.

Chissà come mai per firefox invece andava bene... bah.

**ashtur1** · 19-07-2006, 10:34

alla base di tutto c' e' lo stimolo a risolvere tutto nella maniera più elegante, ovvero l' unico foglio di stile...e poi la comodità sta proprio nel fatto che se riesci ad usarne uno solo, poi quando devi andare a modificare qualcosa è una festa!

Discussione: Float dentro float problema

Strumenti discussione

Ricerca discussione

Visualizza

Float dentro float problema

Permessi di invio