Question

I have an <article> element with three children: a header, a content div, and a footer. The article is absolutely positioned with height and width set, so that it fits nicely into a grid of articles. The header has some variable content, such as the article title, date, etc. and is allowed to expand as it needs. The footer is absolutely positioned within some space set aside in the article by padding the bottom of the article. The content div, however, refuses to play nicely.

What’s happening is that the grid_content div just takes up however much space it needs to accommodate its content, overflowing the <article> element as it does so. I’d figure out some explicit height to set on it, but both the <article> height and the header height are variable, depending on how many spaces it takes up in the grid and what the article title is, respectively.

Is there some clean way to get the div to respect its containment, or will I need to do some ugly JS hacks to get it to stay put?

Thanks!

http://jsfiddle.net/j2fE4/

Answer 1

OK, so I did manage to solve this, but the solution was a two-part deal involving JavaScript.

First, I used some custom JavaScript to calculate the appropriate height for the .grid_content elements, pasted here for reference. The solution isn’t general to other projects, but should illustrate the thought process.

function resizeContentElements() {
    $('div.grid_content').each(function(i, element){
        var $element = $(element);

        var parentHeight = $element.parent().height();
        var elementPadding = parseFloat($element.css('padding-top')) + parseFloat($element.css('padding-bottom'));
        var siblingSpace = $element.prev().height() + parseFloat($element.prev().css('padding-top')) + parseFloat($element.prev().css('padding-bottom'));

        $element.height(parentHeight - siblingSpace - elementPadding);
    });
}

After that, I grabbed http://dotdotdot.frebsite.nl/ and applied it to the div.grid_element collection. Everything is getting ellipses just fine, though the point at which the content gets cut off with ellipses does not seem that even, yet. My best guess is that the irregular (and often invalid) markup in those containers is messing with it.