Question

So let’s say have the following content structure:

<div class="wrapper">
    <div class="contentOne" style="width:50px"></div>
    <div class="contentTwo"></div>
    <div class="contentThree"></div>
    <div class="contentFour"></div>
</div>

What I want to achieve on page load, is for the width of the 1st div (contentOne) to be picked up and increment the width of the other 3 divs by 50px. In the end I want the following:

<div class="wrapper">
    <div class="contentOne" style="width:50px"></div>
    <div class="contentTwo" style="width:100px"></div>
    <div class="contentThree" style="width:150px"></div>
    <div class="contentFour" style="width:200px"></div>
</div>

First prize would be for this to be possibly using CSS3 Calc. If not JS will be a close 1st princess.

Thanks

Answer 1

Right now, CSS has no preceding-sibling selector (although there is a “following sibling” selector, for some reason), so a pure CSS solution isn’t yet possible. jQuery would be something like this:

$('div:not(:first)').each(function()
{
    $(this).width($(this).prev().width() + 50);
});