How to fix text overflowing from DIV

I've got 2 custom widgets, with HTML in each of them. When I'm viewing the site in desktop mode they're displayed fine, but on smaller resolutions (when the widgets are displayed below main content) the text overflows out of the parent div.

You can see this here in the sidebar

enter image description here

Up to now, I have:

HTML:

<div id="cstmwdgt_background_image">
<img src="http://vetromar.com/beta/wp-content/uploads/2013/12/inspection_trip.png" />
<div id="cstmwdgt_text_overlay">
<p class="cstmwdgt_text_style_pink">Realiza tu Viaje de Inspección</p>
<br />
<a class="cstmwdgt_btn_pink" href="#">Click Here</a>
</div>
</div>

CSS:

/* CUSTOM WIDGET */
/*BG & Float text*/
#cstmwdgt_background_image {
width:100%;
position: relative;
overflow: visible;
white-space:normal
}
#cstmwdgt_text_overlay {
margin-left: 1px;
margin-top: 1px;
padding-right: 5px;
position: absolute;
top: 2px;
left: 10px;
text-align:left;
max-width: 280px !important;
display:block;
}
/*Text Style - Pink*/
.cstmwdgt_text_style_pink {
color: #e82c90;
font-weight:bold;
font-size: 16px;
font-family: Arial;
}
/*Btn Style - Pink*/
.cstmwdgt_btn_pink {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #fff !important;
padding: 5px 10px;
background: #e82c90;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
border: 3px solid #d42d89;
-moz-box-shadow:
    0px 1px 1px rgba(000,000,000,1),
    inset 0px 0px 0px rgba(255,255,255,0);
-webkit-box-shadow:
    0px 1px 1px rgba(000,000,000,1),
    inset 0px 0px 0px rgba(255,255,255,0);
box-shadow:
    0px 1px 1px rgba(000,000,000,1),
    inset 0px 0px 0px rgba(255,255,255,0);
text-shadow:
    0px -1px 0px rgba(000,000,000,0.2),
    0px 1px 0px rgba(255,255,255,0.3);
}
.cstmwdgt_btn_pink:hover{ border: 3px solid #8a1e5a; color: #fff !important;}

Here's a jsfiddle http://jsfiddle.net/breadadams/XaSv8/

I've also tried with word-wrap: breakword but no luck.

Just to be clear, there are 2 images (a green one and a pink one) - I'm going to be applying the same things to both of them

Solution

If you add display: inline-block to your #cstmwdgt_background_image, it will cause the div to collapse around the content and, in turn, force word-wrap for your text.