My goal is to make the borders in the screen shot below of equal height:
The text in both sides can be variable length, but the right side will always be less.
This is a very common type of question in stackexchange, usually about the height the of background, but not the borders. However most things I tried did not work. However, using jquery, I am able to achieve the result I want:
The jquery is as follows, along with comments that explain what is needed in the HTML:
// add equal height border to right panel
// to prevent flash, it is set in the html to border:none, and enabled here
// if javascript is disabled, the border will be missing - no biggie
// - 2 needed to get it perfect
$('#right-panel .rounded').height($('#left-panel').height() - 2).css('border','solid maroon 1px');
HTML
<div class="industry-body">
<div id="left-panel" class="industry-panel">
<div class="rounded">
<div class="industry-bar top-left top-right"></div>
<div class="industry-panel-inner">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed ac massa non odio mattis molestie. Donec feugiat, risus nec dictum luctus, lorem magna elementum felis, eget varius libero lacus vel quam. Nunc hendrerit lorem sed elit. Fusce ultrices placerat mauris. Integer dignissim, nunc sed porta sollicitudin, dui ante egestas purus, a egestas magna urna sed ipsum. Suspendisse potenti. Morbi tellus mi, cursus nec, congue eget, ornare eu, nulla. Etiam ultricies, ipsum bibendum bibendum interdum, nibh risus porta enim, et vulputate enim eros ut justo. Suspendisse suscipit laoreet quam. Sed faucibus ante at libero. Sed vehicula porttitor quam. Fusce in nisl a erat congue facilisis. Nullam lectus dui, rutrum et, venenatis sed, tristique ac, velit. Pellentesque nec lacus. Phasellus sed pede vel erat semper ultricies.
</div>
</div>
</div>
<div id="right-panel" class="industry-panel">
<div class="rounded" style="border:none !important;">
<!--<div class="rounded">-->
<div class="industry-bar top-left top-right"></div>
<div class="industry-panel-inner">
<p class="industry-panel-head">Did you know?</p>
Sed feugiat, lectus vitae mollis euismod, diam odio sollicitudin massa, ac ullamcorper dolor urna porttitor ligula. Proin ultricies elit vitae sem. Pellentesque pulvinar adipiscing nisl. Etiam non sapien. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed luctus. Etiam sodales dolor a purus. Curabitur quis est a ante pellentesque porttitor. Sed fermentum, nisl in viverra dictum, ante quam gravida nulla, ut vulputate nibh nisi vel sapien. Aenean eros. Quisque bibendum augue vitae erat. Sed iaculis turpis in erat.
</div>
</div>
</div>
</div>
In particular, setting the style for border:none must be done inline and have !important, or it will not work. Putting it an external stylesheet will not work in Chrome for some reason.
Here is the problem:
Having the jquery apply the proper border height in some browsers results in a "flash", where the original wrong height border appears for an instant, which is then replaced by the right sized border. To remove the flash, there is a "trick" wherein the HTML has border:none; and the jquery turns the border back on after the resizing is done.
Having the trick (border:none and display with jquery) works in some browsers to eliminate the flash, but in others prevents the border from appearing at all.
With "trick" applied (where "ok" means properly sized border present and no flash): Chrome - ok Firefox - ok IE8 - ok IE9 - ok IE10 - no border IE11 - no border Safari - no border
Without "trick" applied: Chrome - flash Firefox - ok IE8 - ok IE9 - flash IE10 - flash IE11 - ok Safari - ok
By the way, this is an odd assortment, as it puts Safari into a class of some versions of IE, which I have not seen before.
So it appears that the solution would be to detect the browser, and apply the trick to Chrome, Firefox, IE8, IE9, and not apply the trick to IE10, IE11, and Safari.
Is there a better solution than having to detect browsers?
