title: Table going out of div
body: <p>I have a problem in layout in my spring MVC application. In my app, table which is containing in div going out of it even I set a width parameter for this div. I tried many solutions which I googled but without success. Here is my jsp file, CSS file, and screen from my app. As you can see when text in table is long it's not break to new line (as I want).</p>
  
  <p>CSS file:</p>
  
  <pre><code>    th,td {
      border-style: solid;
      border-width: 5px;
      border-color: #BCBCBC;
  }
  
  
  #all {
      width: 500px;
  }
  
  #tablediv {
      width: 400px;
      float: left;
  }
  </code></pre>
  
  <p>jsp file:</p>
  
  <pre><code>    &lt;body&gt;
  &lt;h3&gt;All your notes:&lt;/h3&gt;
  &lt;c:if test="${!empty notes}"/&gt;
  
  &lt;form method="post" action="manage_note"&gt;
  
  &lt;div id="all"&gt;
  &lt;div id="tablediv"&gt;
  
  &lt;table&gt;
  
  &lt;tr&gt;
      &lt;th class="widther"&gt;Note date&lt;/th&gt;
      &lt;th&gt;Description&lt;/th&gt;
  &lt;/tr&gt;
  
  &lt;c:forEach items="${notes}" var="note"&gt;
  
  &lt;tr&gt;
      &lt;td class="widther"&gt;${note.date} ${note.time}&lt;/td&gt;
      &lt;td &gt;${note.description}&lt;/td&gt;
      &lt;td&gt;&lt;input type="radio" name="chosen_note" value="${note.note_id}"&gt;&lt;/td&gt;
  &lt;/tr&gt;
  
  &lt;/c:forEach&gt;
  
  &lt;/table&gt;
  &lt;/div&gt;
  
  &lt;div id="addbutton"&gt;
      &lt;input name="add_note" type="submit" value="Add note"/&gt;
  &lt;/div&gt;
  
  
  &lt;/div&gt;
  
  
  &lt;div id="restbuttons"&gt;
      &lt;input name="edit_note" type="submit" value="Edit"/&gt;
      &lt;input name="delete_note" type="submit" value="Delete"/&gt;
  &lt;/div&gt;
  
  &lt;/form&gt;
  
  &lt;/body&gt;
  </code></pre>
  
  <p>And here is screen:</p>
  
  <p><a href="http://imageshack.us/photo/my-images/203/tableproblem.png/" rel="noreferrer">http://imageshack.us/photo/my-images/203/tableproblem.png/</a></p>