title: Why is the text in my div in html not wrapping around my pictures?
body: <p>For some reason the text in my div#wrapper is not wrapping around the images and is instead ending at the line above the picture and resuming underneath it. I have created classes for the pictures and coded them to float left or right. Here is a picture of what I am talking about.
  <a href="https://i.stack.imgur.com/agFku.jpg" rel="nofollow noreferrer">page screenshot</a></p>
  <p>Here is the code.</p>
  <pre><code> &lt;!doctype html&gt;
      &lt;html lang=&quot;en&quot;&gt;
      &lt;head&gt;
      &lt;meta charset=&quot;UTF-8&quot;&gt;
      &lt;title&gt;Planet Namek&lt;/title&gt;
        &lt;link href=&quot;css/styles.css&quot; type=&quot;text/css&quot;
          rel=&quot;stylesheet&quot;&gt;     
          &lt;/head&gt; 
          &lt;body&gt;
      &lt;div id = wrapper&gt;
      &lt;h1&gt;Welcome to Planet Namek&lt;/h1&gt;          
          &lt;h2&gt;headline 2&lt;/h2&gt;         
          &lt;p align=left&gt;Contrary to popular belief, Lorem Ipsum is not simply Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Duis at consectetur lorem donec massa sapien faucibus et molestie. Laoreet non curabitur gravida arcu ac tortor dignissim convallis. Elementum sagittis vitae et leo duis. Volutpat sed cras ornare arcu. Lacus vel facilisis volutpat est. Enim sed faucibus turpis in eu mi bibendum. Pellentesque adipiscing commodo elit at imperdiet. Mi ipsum faucibus vitae aliquet nec. Ipsum dolor sit amet consectetur adipiscing elit pellentesque. Aliquam purus sit amet luctus venenatis. Accumsan in nisl nisi scelerisque eu ultrices vitae auctor.&lt;/p&gt;&lt;img class =&quot;right&quot; src=&quot;Images/planetnamek.jpg&quot; alt=&quot;planet namek&quot;&gt;      
          &lt;p align=left&gt;Risus sed vulputate odio ut enim blandit volutpat maecenas. Amet nisl purus in mollis nunc sed id semper risus. Ornare lectus sit amet est placerat in egestas erat imperdiet. Nec feugiat in fermentum posuere urna. Risus nec feugiat in fermentum posuere urna. Fames ac turpis egestas integer eget. Viverra suspendisse potenti nullam ac tortor vitae. Scelerisque eu ultrices vitae auctor. Ultricies tristique nulla aliquet enim. Sed adipiscing diam donec adipiscing. Urna cursus eget nunc scelerisque viverra mauris. Adipiscing bibendum est ultricies integer quis auctor. Malesuada fames ac turpis egestas sed tempus urna. Ligula ullamcorper malesuada proin libero. Phasellus vestibulum lorem sed risus ultricies tristique nulla. Sit amet nisl suscipit adipiscing bibendum est ultricies. Semper risus in hendrerit gravida. Aliquet enim tortor at auctor. Dolor sed viverra ipsum nunc. Accumsan lacus vel facilisis volutpat est velit. &lt;img class =&quot;left&quot; src=&quot;Images/namekian.png&quot; alt=&quot;namekian&quot;&gt;&lt;/p&gt;  
      Nisl nisi scelerisque eu ultrices vitae auctor. Eleifend quam adipiscing vitae proin. Tempor orci dapibus ultrices in iaculis nunc sed augue lacus. Facilisi cras fermentum odio eu feugiat pretium nibh ipsum consequat. Elementum nibh tellus molestie nunc non blandit massa enim nec. Lectus vestibulum mattis ullamcorper velit sed ullamcorper morbi. Consectetur lorem donec massa sapien faucibus. In ante metus dictum at tempor commodo ullamcorper. Blandit cursus risus at ultrices. Quam adipiscing vitae proin sagittis nisl rhoncus mattis rhoncus urna. Sed arcu non odio euismod lacinia at. Mattis pellentesque id nibh tortor id aliquet lectus. Nunc eget lorem dolor sed. Id diam maecenas ultricies mi eget mauris pharetra et. Varius sit amet mattis vulputate enim nulla aliquet.             
          &lt;/div&gt;
          &lt;/body&gt;
          &lt;/html&gt;
  </code></pre>
  <p>css here:</p>
  <pre><code> &lt;style&gt;
  * {
  padding:0;
  margin:0;
          }      
  header{       
  }   
  body{
      background-image:url(&quot;images/namekbackground.jpg&quot;);   
      font-family:Verdana, Helvetica, Sans-seri;
      }            
  div#wrapper{
          width:940px;
          margin:30px auto;
          border:1px solid #000;
          word-wrap:break-word;
          overflow: hidden;
          padding:20px;
          color:darkred;            
          background: rgba(10,50,300,.75);     
      }    
  img-left{
      float:left;
          margin:0 100px 10px 0;        
          }             
  img-right{
      float:right;
      margin: 0 0 10px 100px;
          }               
          p{
              word-wrap:break-word;
              line-height:1.4;
          }                       
  &lt;/style&gt;
  </code></pre>