[css] Problema di posizionamento

[ciro78]

Ho il seguente css

.contenuto
	{
		position:relative;
		width:720px;
		height:430px;
		overflow:hidden;
		left:0px;
		margin:0px 0px 0px 0px;
		padding:0px 0px 0px 0px;
		border:2px solid #CC0000;	
	}	

.dx
	{
		width:530px;
		height:430px;
		border:2px solid #009933;
		padding:0px;
		float:right;
		clear:both;
	}
	
.sx
	{
		width:180px;
		height:430px;
		border:2px solid #0066CC;
		padding:0px;
	}	
	
.foto1
	{
		
		position:relative;
		display:block;
		width:110px;
		height:120px;
		border:2px solid;
		margin-left:25px;
		margin-top:7px;
		text-align:center;
	}

e il seguente html

<div class='contenuto'>
<div class='dx'>
</div>
<div class='sx'>
<div class='foto1'>
jlkjlksjlksjlkfjsldkfjlskdjflksdj
sdf
sdf
sdf
sdf
sdf
</div>
</div>
</div>

quello che inserisco in foto 1, che come si vede dal css è un box piccolo, esce fuori da tale box. in pratica il testo continua anche oltre il box individuato dai bordi. non dovrebbe vedersi

come risolvo?

[WebStylist]

Prova a dare uno sguardo a queste due pagine (fanno parte della stessa guida) :

- http://css.html.it/faq/leggi/219/qua...a-classe-e-id/
- http://css.html.it/guide/lezione/22/...tori-speciali/

[gengix]

Includere del testo "libero" dentro un div è semanticamente scorretto.
In ogni caso, se il testo all'interno del div supera i valori dell'altezza o dell'altezza definiti nel contenitore, è normale che "sfondi" quest'ultimo. In questo caso l'effetto viene amplificato dalla mancanza di spazio nella prima frase:

jlkjlksjlksjlkfjsldkfjlskdjflksdj

Questo provoca dei problemi di formattazione del testo, che di conseguenza non va a capo correttamente.

Annida il tuo testo dentro un elemento

, definisci a quest'ultimo una larghezza e tira via l'altezza nel div .foto1. In questo l'altezza del div aumenterà proporzionalmente al testo.
Se vuoi che il paragrafo abbia la stezza larghezza del div, dai il valore auto alla proprietà width del

. Nella prima frase inserisci degli spazi.

Puoi anche tirare via i position, in questo contesto non servono molto e puoi levare la proprietà display:block a .foto1, essendo quest'ultimo già un elemento di blocco.

[ciro78]

grazie dei consigli.
in particolare quello sul display block
per quanto riguarda il testo in un tag div , avevo riscontrato le stesse cose in un altro thread precedente. in genere non uso mettere i tag p in fase di debug

ciao e grazie