css che sbaglia addizione?

[gabar-el]

ciao, non riesco a venire fuori da sto css, mi date una mano?

#corpo {
	margin: 50px 0 25px 0;
	width: 950px;
	height: 538px;
	float: left;
	text-align: left;
	background-color: #ff0000;
}

#sinistra {
	margin: 0;
	padding: 5px 15px;
	width: 550px;
	height: 528px;
	float: left;
	background-color: #dedede;
}

#destra {
	margin: 0 0 0 15px;
	padding: 5px 55px;
	border: 1px dashed #ccc;
	width: 243px;
	height: 163px;
	background-color: #f5f5f5;
	float: right;
}

#destra2 {
	margin: 0 0 0 15px;
	padding: 5px 55px;
	width: 245px;
	height: 353px;
	background-color: #d3d2d1;
	float: right;
}

tutto sembra andare bene ma vedo il bg color del corpo sbucare di un pixel sotto il div sinistra, il che è impossibile visto che sinistra è = alla somma di destra e destra2....
thank's

[fcaldera]

1) quale/i browser si comporta in modo errato?
2) che doctype stai usando?
3) il codice (x)html che usa questi id com'è fatto?

[gabar-el]

1) sto lavorando in linux e posso provare solo con opera e konqueror. Opera da l'errore, mentre konqueror fa il suo lavoro.
2) uso xhtml 1.0 strict
3)questo l'html:

<div id="contenitore">

	<div id="testa">

	</div>

	</div>

	<div id="corpo">

		<div id="sinistra">
		</div>

			<div id="destra">

			</div>
			<div id="destra2">
			</div>

			</div>

<div id="piede">


</div>

</div>

thank's

[fcaldera]

ci sono due cose che non mi tornano.

Se hai due blocchi float a destra e uno a sinistra, a meno di riposizionarli esplicitamente, il codice dovrebbe essere disposto in questo modo,

		<div id="destra">
		</div>

	        <div id="destra2">
		</div>

		<div id="sinistra">
		</div>

altrimenti tanto varrebbe flottare tutto a sinistra nel tuo caso


la seconda cosa è che il div corpo è largo 950px;
al suo interno hai

#sinistra che occupa 550 + (15x2 padding) = 580px
#destra che occupa 243 + 15 (margin)+ (55x2 padding) + 2 (bordo) = 365px
#destra2 che occupa 245 + 15 + (55x2 padding) = 365px

a occhio si vede che 580+365+365 supera di molto i 950 pixel del contenitore;
tra l'altro non è nemmeno vero che sinistra = destra + destra2.

Nei browser w3c compliant infatti (come Opera) la larghezza effettivamente occupata da un blocco è uguale a width+padding+border.

[oskaron]

scusa, su linux puoi usare anche firefox..

[gabar-el]

ora controllo meglio il tutto... cmq dicendo la prima così su piedi io avevo intenzione di fare stare destra e destra2 uno sotto l'altro e ci stanno, forse ho sbagliato tutto?

si, ho anche firefox, ma essendo pagine asp non so perchè invece di farmele vedere mi chiede con cosa voglio aprirle....

[gabar-el]

le prime cose che ho notato sono:
1) ho riportato male il css, sembra che chiudo subito il div contenitore, ma è ok, ho involontariamente cancellato l'apertura del div nav
2) volevo dire che sinistra = destra + destra2 per quanto riguarda l'height (il problema infatti è quello)
3) per quale motivo devo mettere nell'html prima i destra e poi sinistra?
4) credo si sia già capito, ma ripeto che ciò che volevo creare era un div a sx e 2 a dx uno sotto l'altro.
5) destra e destra2 hanno un width di 370 e non di 365 :rollo:
6) ho capito dai conti che hai fatto che metti i 3 div uno di fianco all'altro, ma io ho creato un layout a 2 colonne (per questo speravo che i div di dx si mettessero uno sotto l'altro) per fare quei conti dovrei avere un corpo con sinistra e destra all'interno e poi a destra destra2, o non ho capito un tubo?

thank's

[fcaldera]

quindi il layout che vorresti ottenere sarebbe

+----------------------------------------+
| +------------------+ +---------------+ |
| |                  | |               | |
| |                  | |     dx        | |
| |      sx          | |               | |
| |                  | +---------------+ |
| |                  | +---------------+ |
| |                  | |               | |
| |                  | |     dx2       | |
| |                  | |               | |
| +------------------+ +---------------+ |
+----------------------------------------+

?

se si allora una struttura possibile è

<div id="corpo">

      <div id="sinistra">
      </div>

      <div id="destra">
            <div id="destrasopra">
            </div>
            <div id="destrasotto">
            </div>
      </div>
</div>

i div corpo, sinistra e destra avranno tutti float:left

[gabar-el]

esatto! la cosa strana è che se faccio divenire i 2 destra un unico div con i rispettivi conti del caso tutto va bene, ma così come è ora mi sbuca un pixel sotto al div sx, sembra quasi che il div destra2 vada più giù del dovuto.... (non so se mi sono spiegato, se serve magari posso buttare un link)

[gabar-el]

oh scusate, ho provato a caricare la pagina e a quanto pare è un problema locale perchè on-line con opera la vedo bene.
ora mi chiedo circa il resto tutto bene? fcaldera la sequenza dei div va bene alla fine?
thank's