Far uscire il testo da un div senza ridimensionarlo

[alexidro]

Ciao a tutti!
Sono nuovo del forum, ma tante volte ho già trovato risposte provvidenziali ed esaustive, quindi grazie a tutti i partecipanti!

Sono alle prese con un homepage con layout a 3 colonne nel quale ho creato alcuni div che mostrano immagini con titoli e sottotitoli, di cui trovte uno screenshot qui: http://www.alessandroboselli.it/foto/screenshot.jpg

Vorrei fare in modo che il testo dei sottotitoli uscisse in parte dal div andando a capo solo quando inserisco io il tag
, e non automaticamente alla dimensione del div, e senza rollbar, ovviamente.

Ne ho provate diverse ma nulla da fare al momento, ho esaurito le risorse. Grazie a chiunque vorrà illuminarmi

Di seguito il codice incriminato nel CSS:

/* Homepage layout --- start */
#wrapper {
	text-align: left;
	margin: 0px auto;
	padding: 0px;
	border:0;
	width: 980px;
}

#side-left {
	float: left;
	width: 300px;
}

#center { 
	float: left;
	width: 300px;
}

#side-right {
	float: right;
	width: 380px;
}
/* Homepage layout --- end */


/* Homepage images --- start */
.homepageimage {
	position:relative;
	float:left; /* optional */	
	top:40px;
	-moz-box-shadow: 3px 3px 4px rgba(0,0,0,0.5);
	-webkit-box-shadow: 3px 3px 4px rgba(0,0,0,0.5);
	box-shadow: 3px 3px 4px rgba(0,0,0,0.5);
	/* For IE 8 */
	-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#5f5f5f')";
	/* For IE 5.5 - 7 */
	filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#5f5f5f');
}
.homepageimage a {
	text-decoration: none;
	float: left;
}
.homepageimage a .homepageimagetitle {
	display: block;
	font-family: 'Molengo', Arial, serif;
	font-size: 18px;
	font-style: normal;
	font-weight: 400;
	text-shadow: none;
	text-decoration: none;
	letter-spacing: 0.050em;
	word-spacing: 0em;
	line-height: 1.2;
	padding: 10px 0;
	background: #111;
	filter:alpha(opacity=75);
	opacity:.75;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";
	color: #fff;
	position: absolute;
	top: 0px;
	left: 0px;
	padding: 5px;
	margin: 0;
	width: 190px;
	/*position: absolute;
	right: 20px;
	bottom: 20px;
	filter:alpha(opacity=65);
	opacity:.65;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=65)"; /*--IE 8 Transparency--*/
}

.homepageimage a .homepageimagesub {
  	display: block;
 	font-family: 'Buda', serif;
 	font-size: 22px;
 	font-style: normal;
 	font-weight: 400;
 	text-shadow: none;
 	text-decoration: underline;
 	text-transform: none;
 	letter-spacing: 0.007em;
 	word-spacing: 0em;
 	line-height: 1.15;
	padding: 10px 0;
	background: #111;
	filter:alpha(opacity=75);
	opacity:.75;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";
	color: #fff;
	position: absolute;
	top: 215px;
	left: 0px;
	padding: 5px;
	margin: 0;
}

[mexican]

Non devi dare la dimensione al div che contiene il testo.

[alexidro]

infatti il div che contiene il testo che voglio fare uscire (.homepageimage a .homepageimagesub) non ha l'attributo width, ma lo eredita dal div .homepageimage a .homepageimagetitle , o no?
Come posso fare per far si che venga cancellato un attributo ereditato?
(non so se ereditato è il termine giusto) scusate sono alle prime armi...

[mexican]

Originariamente inviato da alexidro
infatti il div che contiene il testo che voglio fare uscire (.homepageimage a .homepageimagesub) non ha l'attributo width, ma lo eredita dal div .homepageimage a .homepageimagetitle , o no?
Come posso fare per far si che venga cancellato un attributo ereditato?
(non so se ereditato è il termine giusto) scusate sono alle prime armi...

clear:both;