jquery appends elements outside its div-element

Question

I wrote this code which appends movie posters to a selected div with an ID. For whatever reason, appended elements end up outside (below) the div. When I check the HTML in my debugger, the elements are clearly inside the div in question.

I have no idea what's going on here, and couldn't find an answer by searching. Help would be greatly appreciated!

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.

            <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.js">
    </script>



    <script type="text/javascript">

        $(document).ready(function(dis) {
            $("#displayBoxFind").append("<div id='movieListBox2' class='movieListBoxWatchque'><p class='box_title'>Lorem Ipsum</p><p class='box_description'>Lorem Ipsum</p></div>").slideDown();


            for(var i=0; i<7; i++){
                $("#movieListBox2").append("<div class='filmdiv'><img class='posterClickableNoMargin' data-movieId='dsfa' id='dsfa' src='dsfa' alt='No Poster'><div class='metadiv'><p class='film_title'>'dsfa'</p><p class='meta'>Genres: 'dsfa'</p><p class='meta'>Vote average: 'dsfa'</p><p class='meta'>Release date: </div></div>");
            }
        });


    </script>

    <style type="text/css">
        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); 
        }


    </style>

</head>


    <body>
           <div id="displayBoxFind" class="movieListBox_trans"></div>
    </body>

Can you post a fiddle of this? I suspect it may be an issue of adding an overflow style, possibly setting the container to overflow:auto;, but without seeing it in action I am not sure. This happens a lot when floating elements and not clearing the floats with clear:both; — Thomas Cheney, Jan 23 '14 at 23:32

score 1 · Accepted Answer · edited May 23 '17 at 12:11

1

Add this style to fix the problem

div.movieListBox_trans {
    overflow: hidden;
}

Fixed version http://jsbin.com/OSUkupO/2/edit

Basically you have the problem with float:left and context. Read this one How does the CSS Block Formatting Context work?

edited May 23 '17 at 12:11

Community

1
1

answered Jan 23 '14 at 23:32

Eugene Glova

1,543
1
9
12

jquery appends elements outside its div-element

1 Answers1