How to wrap jQuery function in a div?

How can I address having a responsive height to a div with the content that is passed into it from a JSON file?

• Intent The containing div and body should have a responsive height according to the content. Currently if the description is larger than the body, it will extend down into the footer. Background The content is being populated on the page from a JSON file, the content is alternated with jQuery cycle, into a MustachJS template. I ended up having to implement min-height. But this is causing a problem if the browser is at a height lower than a certain point. Here is my code HTML <div id="casesContainer"> <div class="image-navigation"> <div class="image-navigation-previous"> <a href="#" id="prev_btn">&laquo; Previous</a> </div> <div class="image-navigation-next"> <a href="#" id="next_btn">Next &raquo;</a> </div> </div> <!-- end of image-navigation --> <div id="carousel"></div> </div><!-- end of #casesContainer --> <script id="casestpl" type="text/template"> {{#cases}} <div class="case"> <div class="gallery_images_container"> <div class="item_container"> <div class="gallery_heading">BEFORE</div> <img src="/assets/img/content/images-bruxzir-zirconia-dental-crown/cases/{{image}}_b_320.jpg" alt="Photo of {{alt}}" /> </div> <div class="item_container"> <div class="gallery_heading">AFTER</div> <img src="/assets/img/content/images-bruxzir-zirconia-dental-crown/cases/{{image}}_a_320.jpg" alt="Photo of {{alt}}" /> </div> </div> <div class="description_container" style="min-width:310px;"> <p> <span><strong>Case Number {{{number}}} {{version}}:</strong></span> {{{description}}} </p> </div> </div> {{/cases}} </script> CSS #carousel { height:100%; min-height:600px; } .case { max-width: 640px; height:auto; } .gallery_images_container { clear: both !important; } .item_container{ max-width: 320px; float: left; } .gallery_heading { background: black; color: white; width: 100%; text-align: center; } .description_container { min-width: 308px; max-width: 640px; padding: 6px 6px 12px 6px; clear: both !important; } JavaScript $(function() { $.getJSON('/pages/cases-bruxzir-zirconia-dental-crown/cases.js', function(data) { var template = $('#casestpl').html(); var html = Mustache.to_html(template, data); $('#carousel').html(html); $('#carousel').cycle({ pause: 1, speed: 500, timeout: 10000, slideResize: true, containerResize: true, width: '100%', height: '100%', fit: 1, fx: 'fade', next: '#next_btn', prev: '#prev_btn' }); }); //getJSON }); //function Question has been posted to Stackoverflow but maybe I did not ask in the most clear way. http://stackoverflow.com/questions/17034114/how-to-create-a-responsive-height-for-a-div-whose-content-is-dynamically-generat

• Answer:

  Why not add a overflow: hidden; max-height: ####px; To your code? I'm unclear about what you expect to see at.