dimensioni div

[elcholo]

sto cercando di "convertire" il mio sito impaginato con tabelle ad un modella table-less con i css... ma ho qualche problema con la larghezza dei div:

ho un contenitore largo 750px nel quale inserire 4 contenitori affiancati (2 sopra e 2 sotto) che lo occupino per intero.... il problema è che la cosa funziona diversamente sui diversi browsers con cui l'ho provato (ie6, firefox, opera)... perchè????

sotto posto il codice css:

div#contentitoreMain {
width: 750px;
heigth: 550px;
overflow: visible;
background: #FFFFFF;
}

div#div1 {
float: left;
width: 150px;
heigth: 85px;
overflow: hidden;
border : 1px solid #666666;
}

div#div2 {
float: right;
width: 600px;
heigth: 85px;
overflow: hidden;
background: #CCCCCC;
border : 1px solid #666666;
}

div#div3 {
float : left;
width: 150px;
heigth: 465px;
overflow: visible;
background: #CCCCCC;
border : 1px solid #666666;
}

div#div1-4 {
float : right;
width: 600px;
heigth: 465px;
overflow: visible;
border : 1px solid #666666;
}

[carp]

.. perché non interpretano i CSS tutti allo stesso modo

nello speciico cosa succede?

[elcholo]

succede che in alcuni casi i div si affiancano e riempiono perfettamente la dimensione del contenitore principale, in altri non ci stanno e quindi vengono visualizzato uno sotto all'atro oppure ci rimangono degli spazi vuoti tra uno e l'atro...
... ho provato anche a definire le dimensioni con il metodo "box model hack" tipo così:
width: 148px; \width: 150px; w\idth: 150px;
heigth: 83px; \width: 85px; w\idth: 85px;
... ma ho solo peggiorato la situazione: i div assumono delle dimensioni assurde!!!

ma l'uso dei css non dovrebbe essere migliore delle tabelle?????

[carp]

... è una questione parecchio discussa...

comunque prova mettendo questo dopo il 2° div:

#div2-3 {
width: 100%
height: 1px;
clear: both;
}

[WebFil]

Il mio problema può essere simile

questo è l'estratto del mio .css:

/* Contenuto */

#contenuto {
	width: 547px;
	height: 320px;
	position: absolute;
	border: #ccc solid 1px;
	top: 170px;
	left: 225px;
	z-index: 1;
	color: #082161;
	font: bold 12px "trebuchet MS",verdana,sans-serif ;
	text-align:left;
	overflow: auto;
}

#contenuto div {
	width: 540px;
	padding: 2px;	
}

#contenuto span {
	padding: 2px 4px;
	margin: 2px;
	
}

.etichetta{
		width: 100px;
		border: #ccc solid 1px;
}

.valore{
		width: 148px;
		border: #ccc solid 1px;
}

.valoregrande{
		width: 405px;
		border: #ccc solid 1px;
}

Questo il modo nel quale utilizzo i tag:

<div id='contenuto'>
		<div>
			<span class='etichetta'>Localit&agrave;:</span><span class='valore'>San Remo  dfajkh </span>
			<span class='etichetta'>Zona:</span><span class='valore'>San Martino</span>
		</div>
		<div>
			<span class='etichetta'>Piano:</span><span class='valore'>Seminterrato</span>
			<span class='etichetta'>Metraura:</span><span class='valore'>50</span>
		</div>
		<div>
			<span class='etichetta'>Vani:</span><span class='valore'>2</span>
			<span class='etichetta'>Contratto:</span><span class='valore'>Acquisto residenziale</span>
		</div>
		<div>
			<span class='etichetta'>Descrizione:</span><span class='valoregrande'>sahdfjhaas dfhasjdl 
fjkasd fhas dlfhkajs d asdh ksd hsad   ash fh
askdhfkas kjasdh fa sd as a h   
akjs fahdflkhals dfhah  jdhs fadh fò</span>
		</div>
		<div>
			<span class='etichetta'>Localit&agrave;:</span><span class='valore'>San Remo  dfajkh </span>
			<span class='etichetta'>Zona:</span><span class='valore'>San Martino</span>
		</div>
	</div>

L'effetto lo potete vedete qui:

http://www.boutiquehotel.it/test/index.htm

Il risultato che speravo di ottenere è quello prodotto da IE6, FF e NS mi visualizzano i tag span larghi come il loro contenuto e non della grandezza prefissata.. Dov'è l'errore? Quale è il metodo migliore per ottenere quel layout??

Grazie in anticipo

[carp]

il tag span è un tag inline e quindi non puoi assegnargli una larghezza!!!!

se vuoi farlo devi dichiararlo block ma allora ti va tutto a capo....

[WebFil]

Ho provato prima con div poi ho ricambiato tutto 2 o 3 vole è facile che mi sia perso, potresti dare un'occhiata a tutta la pagina.... in particolare il posizionamento e il dimensionamento di #contenuto mi riesce ed è crossbrowser non pisco perchè all'inetrno non riesco a posizionare e dimensionare dei div Help!!!!!

[WebFil]

Mi manca poco (credo) con questo CSS:

#contenuto {
	width: 547px;
	height: 320px;
	position: absolute;
	border: #ccc solid 1px;
	top: 170px;
	left: 225px;
	z-index: 1;
	color: #082161;
	font: bold 12px "trebuchet MS",verdana,sans-serif ;
	text-align:left;
	overflow: auto;
}

#contenuto div.linea {
	border: #ccc solid 1px;
	margin: 2px;
	width: 510px;
	padding: 2px;
}

.etichetta{
		width: 100px;
		border: #ccc solid 1px;
		padding: 2px;
		margin: 1px;
}

.valore{
		width: 148px;
		border: #ccc solid 1px;
		padding: 2px;
		margin: 1px;
}

.valoregrande{
		width: 405px;
		border: #ccc solid 1px;
		padding: 2px;
		margin: 1px;
}

Ora le dimensioni dei div sono le stesse per IE e FF, non riesco a mettere pero sulla stessa riga il div .tichetta e il div .valore, ora ho usato div, span non va bene, che devo usare??

[carp]

.etichetta{
width: 100px;
border: #ccc solid 1px;
padding: 2px;
margin: 1px;
float: left;
}

[carp]

e .valore{
width: 148px;
border: #ccc solid 1px;
padding: 2px;
margin: 1px;
float: left;
}