CODEWITHSUNDEEP
jquerycsshtml
B. Clay Shannon-B. Crow Raven
B. Clay Shannon-B. Crow Raven

Reputation: 10297

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

It would seem as if there is a "max-width" (or something having similar effect) set on the div somewhere, but there isn't, as far as I can tell. Yet the bottom of the container spills out over the bottom edge like so:

enter image description here

Why would it do that, and how can I prevent it?

UPDATE

What is happening here is that html5 section elements are being dynamically (programmatically, via jQuery) added to the tab's content area. Some 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, I added all that CSS to my stylesheet and then changed the HTML for the content area like so:

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

...and, thanks to Matthew R., it works like a cha[mp,rm] - thanks!

Interestingly, I see that the asp.net project came with a similar partial implementation of that with this CSS:

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

Upvotes: 2

Views: 371

Answers (1)

Matthew R.
Matthew R.

Reputation: 4350

Your list may not be clearing properly. If you have a lot of floated elements and that can cause errors with your rendering. When you float an element you are taking that element "out of flow". Basically the element will disregard its position in the DOM and try to slide to the side you set in your float. If all child elements inside of a wrapper are floated the parent no longer knows how tall it should be (since all the elements are out of flow) and it sets itself to 0px height or to the height of the tallest in-flow element. To fix this you need a clearfix. This will tell the browser to make the container clear its children.

Upvotes: 1

Related Questions