title: Text extends out of <div> once in <p> tag?
body: <p>I am trying to do something very simple. I want my text to stay contained within my     <code>&lt;div&gt;</code>. I was having this problem earlier with two floating <code>div</code>s. I tried clearing them, and using word-wrap however that did not solve the problem. So I put that on hold then moved on to something new.</p>
  
  <p>While creating another <code>div</code> that was not floating, I noticed once I placed the text inside the <code>&lt;p&gt;&lt;/p&gt;</code> tag, the text extended outside the <code>div</code> again. I know this because initially I forgot to place the text in the <code>&lt;p&gt;</code> tag, and the text stayed in the box. Once I corrected it, the text extended out again. Please help. I am pulling my hair out for what I know should be something simple.</p>
  
  <p>Side Note: I do not want to use <code>overflow:scroll;</code>. I don't have enough text for that.</p>
  
  <pre class="lang-css prettyprint-override"><code>#topNews {
      width: 625px;
      height: 220px;
      position: relative;
      font-family: Arial Arial, Helvetica, sans-serif;
      font-size: 14px;
      border-bottom: solid #7e7d7d thin;
      float: left;
      margin-left: -30px;
      margin-top: -15px;
  }
  
  #about {
      width: 320px;
      height: 180px;
      position: relative;
      margin-right: 3px;
      margin-left: 3px;
      margin-top: 7px;
      border: dashed red thin;
  }
  </code></pre>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div id="topNews"&gt;
      &lt;div id="about"&gt;
          &lt;p&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse et turpis sed metus fermentum pellentesque. Vestibulum auctor neque ac nunc elementum malesuada. Praesent non est sed libero vestibulum consectetuer. Sed vehicula. Vivamus quis tellus sit amet erat ultrices luctus. Fusce a ligula. Fusce viverra libero vitae velit.
          &lt;/p&gt;              
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>