title: Child div appearing outside parent div
body: <p>I am trying to place a div that contains a picture into another div. This parent
  div also has 2 other divs inside which work perfectly.
  My html code for the parent and child divs is:</p>
  
  <pre><code>     &lt;div id="contentsWrapper"&gt;
       &lt;div&gt;&lt;ul id="sideNav"&gt;
           &lt;li&gt;&lt;a href="linkone.html" id="linkone"&gt;One&lt;/a&gt;&lt;/li&gt;
           &lt;li&gt;&lt;a href="linktwo.html" id="linktwo"&gt;Two&lt;/a&gt;&lt;/li&gt;
       &lt;/ul&gt;&lt;/div&gt;
  
       &lt;div id="text"&gt;
           Lorem ipsum dolor sit amet, consectetuer adipiscing elit, &lt;br /&gt;
           sed diam nonummy  nibh euismod tincidunt ut laoreet dolore magna.
       &lt;/div&gt;
  
       &lt;div id="picture"&gt;
            &lt;img src="picture.jpg" alt="picture" height="200" width="200" /&gt;
       &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The CSS code is</p>
  
  <pre><code>#contentsWrapper {
      width: 800px;
      margin-left: 10px;
  }
  
  #sideNav {
      padding: 0;
      list-style: none;
      width: 160px;
      margin-top: 0px;
      border-bottom: 1px dashed #999;
      position: absolute;
   }
   #text {
      width: 375px;
      margin-left: 180px;
      font-weight: bold;
   }
   #picture {
      position: absolute;
      width: 225px;
      margin-left: 575px;
      background-color: #FFFF00;
   }
  </code></pre>
  
  <p>But this always places the picture in the correct position from the left side of the screen but below the contentsWrapper div.
  I have tried using just text and changed the width and margin-left valuesfor the picture div but it still comes out with the same result.</p>