Question

I have a box that contains two boxes floating inside it. If the viewport is big, the boxes are next to each other. If the viewport is small, the boxes go one on top of the other (jsFiddle with fixes width and height just to illustrate the two scenarios I have: http://jsfiddle.net/5wpH9/)

I want to use jQuery to give the container box a height (not relevant, but every element inside my wrapper needs to have a fixed height, there can’t be elements floating freely without occupying vertical space). And I need to calculate the height of this container box based on IF the elements inside are floating above each other or not.

The little boxes inside have fixed height, so the result would be something like:

• If elements are next to each other, make container 200px height
• If elements are one on top of the other, make container 400px height

The only way I can think of is doing an offset() or position() calculation from the top of the second box to the top of the container (if it’s more than 10px, apply change). But I’m wondering if there is a better way to do it, something more straight.

Answer 1

Checking .position() isn’t so bad:

if($("#topElement").position().top - $("#bottomElement").position().top > 10) {
    $("#bottomElement").css("height", "400px");
}

Of course, you’ll want to change the IDs–but you get the idea.