background di un <div> vuoto (o contenente altri div non vuoti): IE e Firefox

[99caos]

Ecco il quest:
codice xHtml

<div id="center">
<div id="left"></div>
</div>

codice Css

#center {
	width: 800px;
	background: black;
}
#left {
	width: 170px;
	background: red; 
	float: left;
}

cosa accade:

se nel div left non scrivo nulla:

IE: visualizza una riga di 800 px colorata per 170px in rosso e per il resto degli 800 px in nero

FireFox (mozilla): non visualizza nulla

Se scrivo qualche cosa nel div left:

IE: Stesso come sopra.
FF: Visualizza solo il colore rosso del div left.



Come fare per ottenere lo stesso effetto di IE?

[salasir]

Se lo scopo è quello di avere una riga basta mettere l'altezza ai due div:

height: 20px;

Comunque solitamente i div vengono visualizzati quando hanno un contenuto.

IE si comporta sempre diversamente dagli altri! Prima prova su FF o altri e poi IE

Maurizio

[99caos]

so bene quanto dici circa le divergenze di visualizazione.

Ma quello che mi interessa è altro.

Se io ho un div che contiene un altro div il primo contenitore non è vuoto.

Eppure FF non gli riconosce il contenuto.

Se per esempio assegno 200 px di altezza al div left avrò solo il rettangolo rosso di 170x200px.

Non mi sembra un comportamento corretto.
Te ne rendi conto aggiungendo al div center un bordo nero di 1px.

Il punto non è chi ha ragione o chi ha torto.
Il punto è trovare la soluzione.

Non posso assegnare un'altezza al div center perchè questa è in funzione del contenuto dei div racchiusi al suo interno.

Come fare?

[salasir]

:master:
... non sono tanto sicuro che un div vuoto possa essere inteso come contenuto da un altro div ...

Maurizio

[bagu]

mica ho capito che cosa devi fare ma prova a vedere questa pagina il div vuoto è quello che ha la scritta ziliani case che è una immagine di background.( cmq il trucchetto è il line-height del div interno)
Ciao paolo

[99caos]

non ci siamo

Ripeto:

innanzi tutto il div vuoto non è vuoto:

<div id="center">
<div id="left"></div>
</div>

<div id="left"></div> non è vuoto, è la parte della pagina che conterrà i contenuti.

è proprio questo il problema.

Non posso impostare un'altezza fissa per il div center proprio perchè questa dipenderà dal contenuto del div left.

Devo fare in modo che al crescere in altezza del div left il div center cresca di conseguenza.

Sembra una sciocchezza ma di fatto non ci riesco

[CeMax-2000]

prova a dargli questo:

min-height:400px;
height:auto!important;
height:400px;

[99caos]

ma così imposterei un'altezza fissa
non è quello che voglio

[piesse78]

Originariamente inviato da 99caos
Se io ho un div che contiene un altro div il primo contenitore non è vuoto.

Eppure FF non gli riconosce il contenuto.

assegnando "float: left;" al div interno, lo sottrai al normale flusso della pagina e perciò viene trattato dal browser come se non fosse "interno" al div che lo contiene. Proverei in qualche altro modo, coi posizionamenti relativi o impostando i margini.

[99caos]

E quindi?
Possibile che con FF non si può usare il float?
Mi sembra strano...