title: jquery appends elements outside its div-element
body: <p>I wrote this code which appends movie posters to a selected div with an ID. 
  <strong>For whatever reason, appended elements end up outside (below) the div.</strong> When I check the HTML in my debugger, the elements are clearly inside the div in question. </p>
  
  <p>I have no idea what's going on here, and couldn't find an answer by searching. Help would be greatly appreciated! </p>
  
  <p>Here's the entire code. The DIV used is div.movieListBox_trans in the CSS. The point of all this is to margin the grid area for the posters to the center. However, since the elements end out outside, the margin-center attributes doesn't apply. </p>
  
  <p>
      </p>
  
  <pre><code>            &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.js"&gt;
      &lt;/script&gt;
  
  
  
      &lt;script type="text/javascript"&gt;
  
          $(document).ready(function(dis) {
              $("#displayBoxFind").append("&lt;div id='movieListBox2' class='movieListBoxWatchque'&gt;&lt;p class='box_title'&gt;Lorem Ipsum&lt;/p&gt;&lt;p class='box_description'&gt;Lorem Ipsum&lt;/p&gt;&lt;/div&gt;").slideDown();
  
  
              for(var i=0; i&lt;7; i++){
                  $("#movieListBox2").append("&lt;div class='filmdiv'&gt;&lt;img class='posterClickableNoMargin' data-movieId='dsfa' id='dsfa' src='dsfa' alt='No Poster'&gt;&lt;div class='metadiv'&gt;&lt;p class='film_title'&gt;'dsfa'&lt;/p&gt;&lt;p class='meta'&gt;Genres: 'dsfa'&lt;/p&gt;&lt;p class='meta'&gt;Vote average: 'dsfa'&lt;/p&gt;&lt;p class='meta'&gt;Release date: &lt;/div&gt;&lt;/div&gt;");
              }
          });
  
  
      &lt;/script&gt;
  
      &lt;style type="text/css"&gt;
          div.movieListBox_trans{
              margin-left: auto;
              margin-right: auto;
              margin-top: 20px;
              margin-bottom: 20px;
              background: yellow;
              opacity: 0,5;
          }
  
          div.filmdiv{
              float: left;
              width: 350px;
              height: 180px;
              margin: 15px;
          }
  
          div.metadiv{
              float: right;
              background: #DCDCDC;
              border-style: solid;
              border-width: 1px;
              border-color: #D3D3D3; 
              width: 200px;
              height: 180px;
              border-style:solid;
  
              background:rgba(0, 0, 0, 0.6);
              border-top: 2px solid rgba(255,255,255,0.5);
              color:rgb(255,255,255);
              box-shadow: 5px 5px 5px 5px rgba(0,0,0,0.5); 
          }
  
          img.poster{
              float: left;
              border-style:solid;
              width: 115px;
              height: 180px;
  
              border-width: 1px;
              border-color: #D3D3D3; 
              background:rgba(0, 0, 0, 0.6);
              border-top: 2px solid rgba(255,255,255,0.5);
              color:rgb(255,255,255);
              box-shadow: 5px 5px 5px 5px rgba(0,0,0,0.5); 
          }
  
          img.posterClickableNoMargin{
              float: left;
              border-style:solid;
              width: 115px;
              height: 180px;
  
              border-width: 3px;
              border-color: black; 
              box-shadow: 5px 5px 5px 5px rgba(0,0,0,0.5); 
          }
  
  
      &lt;/style&gt;
  
  &lt;/head&gt;
  
  
      &lt;body&gt;
             &lt;div id="displayBoxFind" class="movieListBox_trans"&gt;&lt;/div&gt;
      &lt;/body&gt;
  </code></pre>
  
  <p></p>