jquery - Why is my content spilling past the bottom of the container? -

it seem if there "max-width" (or having similar effect) set on div somewhere, there isn't, far can tell. yet bottom of container spills out on bottom edge so:

why that, , how can prevent it?

update

what happening here html5 section elements being dynamically (programmatically, via jquery) added tab's content area. pertinent code:

html:

<div id="tabs" class="content-wrapper">     <ul>         <li><a href="#tab-books">books</a></li>         <li><a href="#tab-movies">movies</a></li>         <li><a href="#tab-music">music</a></li>     </ul>     <div id="tab-books">         <select id="bookdropdown">             <option value="pulitzer">pulitzer</option>             <option value="nbcc">national book critics circle</option>             <option value="nba">national book awards</option>             <option value="nobel">nobel</option>         </select>         <div id="bookscontent"></div>     </div> 

css:

.content-wrapper {     margin: 0 auto;     max-width: 960px; }  .wrapper{     float: left;     width: 400px;     margin-left:20px;     padding-bottom:20px; } 

jquery:

$('#bookscontent').html(''); var htmlbuilder = '';  $.getjson('content/nbccjr.json', function (data) {     $.each(data, function (i, datapoint) {         if (isyear(datapoint.category)) {             htmlbuilder += '<div class=\"yearbanner\">' + datapoint.category + '</div>';         } else {              htmlbuilder += '<section class=\"wrapper\" ><a id=\"mainimage\" class=\"floatleft\" href=\"' +                 datapoint.imghref + '\"' + ' target=\"_blank\"><img height=\"160\" width=\"107\" src=\"' + . . .             htmlbuilder += '</section>';                            }     }); //each     $('#bookscontent').append(htmlbuilder)         .find('img').error(function() {             this.src = "content/noimageavailable.png"         });     $('#bookscontent').css('background-color', 'black');     $('button').button(); }); //getjsonnbccjr $largest = 0; $(".wrapper").each(function () {     if ($(this).height() > $largest) {         $largest = $(this).height();     } }); $(".wrapper").css("height", $largest); 

} // getnatlbookcritics()

update 2

okay, added css stylesheet , changed html content area so:

<div id="bookscontent" class="clearfix"></div> 

...and, matthew r., works cha[mp,rm] - thanks!

interestingly, see asp.net project came similar partial implementation of css:

.clear-fix:after {     content: ".";     clear: both;     display: block;     height: 0;     visibility: hidden; } 

your list may not clearing properly. if have lot of floated elements , can cause errors rendering. when float element taking element "out of flow". element disregard position in dom , try slide side set in float. if child elements inside of wrapper floated parent no longer knows how tall should (since elements out of flow) , sets 0px height or height of tallest in-flow element. fix need clearfix. tell browser make container clear children.