Question

How, without background tricks, set the column of content#3 to equal with red column?

<div class="container">
<aside>
    content#1<br />
    content#1<br />
    content#1<br />
    content#1<br />
    content#1<br />
    content#1<br />
</aside>
<div class="some">
    content#2<br />
    content#2
</div>
<div class="some">
    content#3
</div>

Red and first blue columns are dynamic, but red always is longest.

Example: http://jsfiddle.net/eakDL/2/

Was it helpful?

Solution

So You add the following js:

setPositions = function (){
    var container = document.getElementById("container");

    var redHeight = container.children[0].offsetHeight;
    var blueOneHeight = container.children[1].offsetHeight;
    var blueOneBottomMargin = parseFloat(window.getComputedStyle(container.children[1]).marginBottom);

    var bluenTwoTopMargin = parseFloat(window.getComputedStyle(container.children[1]).marginTop);

    var blueTwoHeight = redHeight-(blueOneHeight+blueOneBottomMargin+bluenTwoTopMargin)+2; 

    container.children[2].style.height = blueTwoHeight+"px";
}

to your fiddle and you get this fiddle.

OTHER TIPS

I've added some jQuery code

$(document).ready(function () {
     $(".some").css("height", ($(".container").find("aside").height() / 2) - 3);
});

Try this: http://jsfiddle.net/eakDL/6/ im not sure if i understood you right.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top