title: How to fix text overflowing from DIV
body: <p>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.</p>
  
  <p>You can see this <a href="http://vetromar.com/beta" rel="nofollow noreferrer">here</a> in the sidebar</p>
  
  <p><img src="https://i.stack.imgur.com/y7a1P.png" alt="enter image description here"></p>
  
  <p>Up to now, I have:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="cstmwdgt_background_image"&gt;
  &lt;img src="http://vetromar.com/beta/wp-content/uploads/2013/12/inspection_trip.png" /&gt;
  &lt;div id="cstmwdgt_text_overlay"&gt;
  &lt;p class="cstmwdgt_text_style_pink"&gt;Realiza tu Viaje de Inspección&lt;/p&gt;
  &lt;br /&gt;
  &lt;a class="cstmwdgt_btn_pink" href="#"&gt;Click Here&lt;/a&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>/* CUSTOM WIDGET */
  /*BG &amp; 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;}
  </code></pre>
  
  <p>Here's a jsfiddle <a href="http://jsfiddle.net/breadadams/XaSv8/" rel="nofollow noreferrer">http://jsfiddle.net/breadadams/XaSv8/</a> </p>
  
  <p>I've also tried with <code>word-wrap: breakword</code> but no luck.</p>
  
  <p><em>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</em></p>