Equal height columns

[donboe]

I use the following Javascript to get two equal height columns:

var height = Math.max($(".sidebar").height(), $(".content").height());
$(".sidebar").height(height);
$(".content").height(height);

Basically this is working fine only 50% of the time i need to press F5 to refresh the page to make thes divs indeed equal height. Is there something I can do about that or do you guys recommend a different method to make equal height columns?

Thank you in advance

[jeffreylees]

What browser are you using?

Try wrapping your script in $(window).load(function() { to get consistent results, if you aren’t already.

[PaulOB]

@donboe

Basically this is working fine only 50% of the time i need to press F5 to refresh the page to make thes divs indeed equal height. Is there something I can do about that or do you guys recommend a different method to make equal height columns?

Yes just use css and display:table and display:table-cell (or use flexbox). There is no need for JS and indeed js makes the page very slow if you are throttling the resize event.

Of course it depends on your page and whether the columns you are resizing are related or not. In my experience there has never been a need to use js to equalise columns since 2003.

[coothead]

Hi there donboe,

as Paul has pointed out, there is no need for javascript.

Here is a simple “flex” example…

[code]

untitled document #container { display:flex; } .sidebar,.content { float:left; width:38%; padding:2%; margin:0 1%; border:1px solid #999; box-sizing:border-box; } .content { width:58%; }

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet sem sed libero bibendum tempus faucibus quis mi. Nulla rhoncus vel ipsum in volutpat. Nam tortor nibh, posuere ac lorem ut, suscipit tincidunt leo. Duis interdum justo ac justo vehicula consequat. Curabitur et volutpat nibh. Phasellus rutrum lacus at dolor placerat feugiat. Morbi porta, sapien nec molestie molestie, odio magna vestibulum lorem, vitae feugiat est leo sit amet nunc. Curabitur ornare tempor turpis. In nibh sem, porta ac magna sed, pretium commodo odio. Sed porttitor augue velit, quis placerat diam sodales ac. Curabitur vitae porta ex. Praesent rutrum ex fringilla tellus tincidunt interdum. Proin molestie lectus consectetur purus aliquam porttitor. Fusce ac nisi ac magna scelerisque finibus a vitae sem.

[/code]

coothead

[donboe]

Hi Paul and coothead. Thank you both for the reply . I was still doubting about Flex. But you guys have me convinced. Thanks

[felgall]

@donboe

I was still doubting about Flex.

so use table-cell instead