CSS how to make a text extend over a div without resizing it and without rollbars

I have a homepage layout with 3 columns with an images and captions inside everyone. I have a subtitle also, and I want the subtitle extends orizzontally over the div without resizing it and without rollbars.

see a screenshot here: http://www.alessandroboselli.it/foto/screenshot.jpg

and here is the involved CSS code:

.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-spac开发者_JAVA技巧ing: 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;
}

I think this is what you're looking for:

overflow: visible;

http://www.w3schools.com/cssref/playit.asp?filename=playcss_overflow

EDIT:

The element that is overflowing must have it's width specified. This should set you in the right direction:

http://jsfiddle.net/2qWYf/2

EDIT #2:

If you want it to match that link, try this one:

http://jsfiddle.net/2qWYf/4/

Forget "overflow" and just add any width to .homepageimagesub

for example:

width: 400px; 

If you want different sizes.. you of course need to add these width's individually.

http://jsfiddle.net/2qWYf/3/

for the sake of making it proper.. you might want to control the width of the #side-left and #side-right elements as they are parent elements of .homepageimagesub elements and control their width.

About proper.. You currently have duplicate ID's and thats not proper markup. Basic rule is to use class instead of id whenever you have more than one element with the same name.