0

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/

2
  • One of the holy grails of CSS covered in multiple blogs. Look for 3 column liquid layout or similar.
    – Ben
    Jun 5, 2013 at 6:26
  • 1
    Simple to do in under 10 line of js, no libs needed. See my answer. :)
    – vdbuilder
    Jun 5, 2013 at 7:26

2 Answers 2

1

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.

0
-1

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.

1
  • Your script works for blue container, which allways are equal.
    – kicaj
    Jun 5, 2013 at 7:01

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.