[layout fluido] immagine in div laterale sovrasta il testo in fase di restringimento

[gabar-el]

ciao, stavo valutando un layout fluido, ma avendo 2 div laterali che contengono un'immagine in bg, mi ritrovo a un certo punto in cui restringendo la finestra le due immagini mi sovrastano leggermente il testo prima che, continuando a restringere, il testo vada nuovamente a capo nella sua nuova dimensione... forse sbaglio qualcosa circa dei margin che ho lasciato al div che contiente questo testo, io ho fatto così, ma magari pecco d'ignoranza non sapendo nuotare bene tra i fluidi....

div {
		width: 93%;
		min-height: 152px;
		margin: 0 25px 25px;
	}

ho lasciato un margin di 25px poichè i due div laterali che fanno da bordo costruendo un'immagine hanno appunto questa dimensione e mi aspettavo che tenendo sempre questo margine non si verificasse mai ciò che invece si verifica....
grazie

[gabar-el]

up...

[gabar-el]

provo a fornire più info circa il codice sperando qualcuno possa aiutarmi:

<div id="container">

<div id="box">

<div id="right">
</div>

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

<div id="intro">
<h3>testo</h3>


testo</p>
</div> 

<div class="sw">
<h2>testo</h2>


testo</p>
</div>

</div>

</div>


div#container {
	width: 80%;
	text-align: left;
	margin: 25px auto;
}
div#box {
	width: 100%;
	position: relative;
	background: #c00000;
}
div#left { 
	min-width: 25px;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background: url(images/bgLeft.png) top left repeat-y;
}
div#right { 
	min-width: 25px;
	height: 100%;
	position: absolute;
	top: 0;
	right: 0;
	background: url(images/bgRight.png) top left repeat-y;
}
div#contain {
	width: 90%;
	min-height: 600px;
	margin: 15px 25px 0;
	background: url(images/bgCenter.png) 200px 50px no-repeat;
}
div#intro {
	width: 90%;
	margin: 25px 25px 25px;
}
div.sw {
	width: 93%;
	min-height: 152px;
	margin: 0 28px 25px;
}

come si può intuire, i div right e left hanno dimensione fissa e contengono un'immagine, il div che sta in mezzo a essi contiene testo ed ha dimensione in %. il mio problema è che non riesco a fare si che questi 3 div rimangano distanziati tra loro correttamente, poichè se restringo la finestra del browser a un certo punto il div right con la sua immagine mi comincia a coprire parte del testo. es. prima che la parola "indipendentemente" vada a capo le ultime 3 lettere rimangono nascoste sotto l'immagine di bg del div right.
ho provato un pò di tutto, ma non riresco a trovare una soluzione che sistemi il tutto.
grazie

[BaRaTTaMi]

una cosa...quando scrivi div.sw e div#intro, il div.sw fa lastessa funzione del div#intro solo che è sotto classe ??

[gabar-el]

non ho ben capito cosa mi hai chiesto. cmq si risolve mettendo misure fisse ai div che contengono l'immagine e marign laterali auto ai div che contengono testo. In questo modo non si sovrastano mai....

[BaRaTTaMi]

cioè o metto margin:0 auto e idiv non si sovrappongono ??

[gabar-el]

non ho capito cosa intendevi prima con "stessa funzione". i due div in questione sono distinti....

per il resto inanzi tutto stiamo parlando di un layout liquido, quindi la struttura è creata apposta, in modo particolare poi ho creato un box che contiene immagini che permettono di avere sempre una cornice (ridimensionabile). Dando a questi div una dimensione fissa e ai div che contengono testo e compongono la struttura (come il contain per es.) dimesinone auto e margin uguali a quelli dei div delle immagini ottieni che non si sovrappongono mai, per ovvi motivi....

es.

div#contenitoreImmaginiXcornice {
width: 25px;
background: url(image.png) repeat-x;
}

div#contain {
width: auto;
margin: 0 25px;
}

[BaRaTTaMi]

ma nel css, cosa cambia se metto div.nome o div# nome ... cosa cambia?

[gabar-el]

il punto indica una classe, il cancelletto indica un id.
ai fini del risultato non cambia molto, ma in correttezza e validità del codice si.le classi le puoi applicare a più elementi, gli id, essendo appunto un identificatore, solo a un elemento. In teoria ci sarebbe dell'altro, se vuoi puoi approfondire on-line...

[BaRaTTaMi]

ahn .. io sapevo appunto che il punto indica una classe l'asterisco un id, ma non sapevo la differenza, cioè se dovevo usare uno o l' altro ... cmq grz lo stesso!