Question

The issue that I’m trying to solve:

I have a external div which contains a div.

<div class="external">
    <div class="internal">
        content
    </div>
</div>

The margin between the internal and external div should always be the same.

When the internal div grows/shrinks, the external div will modify its height & width to keep the specified margin with the internal div. Somehow the internal div is controlling the width & height of both divs. When the internal div grows the external div grows too to keep the margin. When the internal div shrinks the external does too to keep the margin.

Anyone? Thanks for reading.

Answer 1

It’s a CSS thing by default:

#internal {
    display: inline-block;
    width: 200px;
    height: 200px;
    background-color: red;
}
#external {
    display: inline-block;
    padding: 10px;
    background-color: #000;
}

Or you could animate the whole thing like this:

$("#internal").animate({width: "300px", height: "500px"}, {duration: 1000, step: function (now,PlainObject) {

    // PlainObject.prop is either 'width' or 'height'
    $("#external")[PlainObject.prop](PlainObject.now + 10);

}});

I assumed that the shrinking and growing happens when the inner div is animated? Or do you mean when the content of the inner div is larger / smaller (more/less text in the inner div)?

The inline-block property is just meant for a CSS-only solution. If you go for a dynamic javascript solution, you should set it to display: block;