Resize Div con contenuti flottanti

[pictor]

Ciao,

Ho questi div:

	<div id="colSxBoxSpacer">
			<div id="linea3-box">
				[img]img/imm_int_cittad.jpg[/img]
				<h1></h1>
				

</p>
				

				<div class="clearer"></div>
			</div>

			<div id="links">
				<a href="http://www.....it/.../" title="Home page dei ......" tabindex="90">
					[img]img/Logo_tn.jpg[/img]
					Home dei ...
				</a>
				

				<div id="archivio">
					<h2>Archivio:</h2>
					<ul>
						[*]<a title="Schema della scheda ...." href="documenti/.....pdf" tabindex="100">Scheda 
			            ......</a>
						[*]<a href="documenti/sondaggio_,,,,.PDF" tabindex="110">Indagine 
          				.....
							

         			   Marzo-Aprile 200x</a>
					[/list]
				</div>
			</div>
		</div>

Come vedete ho messo un div 'clearer' perchè la prima immagine è impostata su float left e voglio che il div contenitore (linea3-box) si redimensioni alle dimensioni della stessa.

Il CSS è:

#colSxBoxSpacer{
			margin-top: 0px;
			margin-right:10px;
			margin-left: 4px;
			padding-top: 1px;
			background: #efecdc;
			}

#linea3-box, #linea3-box img {background: #D2C797;}

#linea3-box {
	border: 5px double #EDE6CD;
	min-height: 136px;
	padding: 2px 3px 15px 3px;
	margin: 5px;
}

#linea3-box a {
	text-decoration: underline;
	font-weight: bold;
	font-size: 90%;
}

#linea3-box p {
	font-size: 90%;
}

#linea3-box p:first-letter {
	font-size: 200%;
	color: #433F1F;
	padding: 0px 2px;
}

#linea3-box img {
	width: 40%;
	float: left;
	padding: 5px 5px 2px 5px;
}

#linea3-box h1{
						padding: 2px;
						margin: 3px;
						BORDER-TOP: #9D9777 2px solid; 
						BORDER-BOTTOM: #9D9777 2px solid; 
						color: #101323; 
						font-weight: normal;
						font-size: 120%;
						line-height: 0.8em; 
						text-align: center;
}
/************************************/

/* Box dei collegamenti */
#links {
		padding: 5px;
		padding-left: 10px;
}

#links a, #links a:hover {
	font-variant: small-caps;
	text-decoration: none;
	color: black;
}

#links a:hover {
	text-decoration: underline;
}

#links a:visited {
	color: #555555;
}

#links img {
	vertical-align: middle;
	border: 1px solid #C5BD7E;
	padding: 2px;
}

		/* Archivio dei links */

#archivio {
	border: 1px solid #DBD7BF;
	width: 80%;
	margin: auto;
	margin-top: 10px;
	margin-bottom: 15px;
}

/* Per l'accessibilità, nelle liste i link devono 
	essere distanti verticalmente di almeno 1em (legge stanca) */
#archivio li a {line-height: 1.5em;}

#archivio h2 {
	font-variant: small-caps;
	text-decoration: underline;
	font-family: "MS Sans Serif", Geneva, sans-serif;
						padding: 2px;
						margin: 3px;
						color: #101323; 
						font-weight: normal;
						font-size: 110%;
						line-height: 0.8em; 
}

Ma nonostante questo div mi sborda comunque l'immagine.


Come vedete il div scuro non prende le dimensioni dell'immagine arancione.... e l'immagine sotto mi 'flotta' sopra.

Come risolvo?

[pictor]

UP

Nessuno che ne capisca un minimo di box model?

[Mich_]

Non riesco a trovare il CSS per il box clearer, per cui non so se c'e` qualche errore li`.

Comunque un box vuoto puo` venir ignorato dal browser, per cui ti consiglio di metterci dentro almeno un carattere (poi magari devi settare il font al minimo, per togliere eventuali spazi aggiunti da IE).

In alternativa devi settare a float anche il contenitore (nel tuo caso linea3-box).

[pictor]

Perdonami, l'avevo tralasciato perchè era contenuto in un secondo css.

Il CSS per il clearer è:

div.clearer {
				clear:both;
				line-height:0;
				height:0;
				display: none;}

[Mich_]

Adesso e` chiaro.
Un box di altezza 0 e con display: none non serve.

Per essere utile deve avere:

.clearer {
  clear:both;
  font-size: 1px; /* altrimenti IE6 lo ingrandisce */
  height: 1px;
}

Puoi anche provare con font-size a zero (e potrebbe andar bene) e height a zero (dubito che serva).
Ma sicuramente il display deve essere a block.

[pictor]

Ok, ho compilato solamente il titolo del box, mentre il paragrafo di testo non è riempito (ha un all'interno).
Ho aggiunto un anche nel clearer per sicurezza.

Se rimuovo il display:none; funziona e il div si redimensiona come l'immagine...

div.clearer {
		clear:both;
		line-height:0;
		height:0;
		font-size: 0;
}

...... il problema adesso è che quando visualizzo la pagina con Internet Explorer il div linea3-box viene mostrato vuoto!!



Ma il bello è che se cambio finestra e torno su IE la parte di testo che non aveva renderizzato appare magicamente!! :berto:



E' un comportamento stranissimo! Non ha senso!

Su FF e Opera funziona bene.
Dove sta l'errore?

PS - Ho provato a mettere anche le dimensioni che dicevi tu ma non cambia.

[Mich_]

In effetti quanto dici non ha molto senso ...
Posso pensare ad un errore di sintassi, oppure a qualche ordine sbagliato di caricamento (il titolo e` un testo o un'immagine?)

Prova comunque a passare dai validatori HTML e CSS, e prova a cambiare colore di sfondo al titolo (se e` un testo): ti rendi conto se viene ignorato il blocco o se viene ignorata la scritta

[pictor]

Ho validato i CSS e non hanno problemi. Solo qualche warning e 1 errore sulla proprietà :focus (comunque non coinvolta nella pagina).

Ho provato a mettere un colore di sfondo ho visto che non viene renderizzato tutto quanto il blocco.

E' davvero assurdo.
In pratica se rimuovo il clear: both torna a visualizzarsi subito, mentre se lo metto (e il clearer serve per quello ) mi si presenta l'anomalia della sparizione.

Ma che succede?!