Different behavior in browser for Div height adjustment
In my website I have two Div's containing variable content. This content is added via a server side include (using a management content PHP seed). I want to give the two columns a similar height by using the following fairly simple script:
$(document).ready(function(e) {
var A = $('#Linkerkolom').height()
var B = $('#Rechterkolom').height()
if (A<B) {
$('#Linkerkolom').css('height', B);
};
if (A>B) {
$('#Rechterkolom').css('height',A);
};
});
When running this script, Firefox and IE adjust the height of the columns while in Google Chrome the script is ignored, but moreover when the script is active Chrome also ignores the height of the inserted html-code from the PHP-seed resulting in an overflow of the content of the div-container. When I deactivate the script everything remains within the borders of the Div, in all browsers.
Since I am no java/jQuery expert I am wondering why the script behaves differently in Chrome, compared to the other browsers IE and Firefox. Can anyone explain this to me and suggest a solution?
$(document).ready(function(e) {
var A = $('#Linkerkolom').height()
var B = $('#Rechterkolom').height()
if (A<B) {
$('#Linkerkolom').css('height', B);
};
if (A>B) {
$('#Rechterkolom').css('height',A);
};
});
When running this script, Firefox and IE adjust the height of the columns while in Google Chrome the script is ignored, but moreover when the script is active Chrome also ignores the height of the inserted html-code from the PHP-seed resulting in an overflow of the content of the div-container. When I deactivate the script everything remains within the borders of the Div, in all browsers.
Since I am no java/jQuery expert I am wondering why the script behaves differently in Chrome, compared to the other browsers IE and Firefox. Can anyone explain this to me and suggest a solution?