title: On next line text is going out of div box
body: <p>Following is my HTML :</p>
  
  <pre><code>&lt;div class="title-box"&gt;    
      &lt;div class="box1" style="background-image:url(/common/images/arrow-r.png); background-repeat: no-repeat; background-position: left center; margin:5px 0px 5px 5px;"&gt;
          &lt;h1&gt;Welcome to the PHP and CSS&lt;/h1&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And Following is my CSS :</p>
  
  <pre><code>.title-box {
      border: 1px dashed #CCC;
      float: left;
      width: 540px;
      margin-bottom: 20px;
      word-wrap:break-word;
  }
  
  .title-box .box1 {
      font-size: 15px;
      padding: 5px;
  }
  
  .title-box .box1 h1 {
      padding: 5px; 
      text-align: left;
      color: #fff;
      margin-left: 35px;
  }​
  </code></pre>
  
  <p>Here the <code>&lt;h1&gt;</code> tag is containing the title. If the title contains more text like : </p>
  
  <pre><code>&lt;h1&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat&lt;/h1&gt;
  </code></pre>
  
  <p>Then its going to the next line but the next lines text is going out of div box. I provided the width to the main div still its going out of div box. I have also tried to add width to <code>&lt;h1&gt;</code> tag but still problem persist.</p>
  
  <p>Any help. Thanks</p>