JQuery Same Height DIVs

Question

I am new to this so I think I am missing something simple.

You can see it here.

As you can see from the message boxes the JavaScript is working fine but the two DIVs are not being resized to the same height.

The JavaScript I am using is this:

function doResize() { alert('before: being ' + $('#being').height()); alert('before: questions ' + $('#questions').height()); maxHeight = 0; var divs = jQuery("#questions, #being"); $.each(divs, function () { var height = jQuery(this).height(); if (maxHeight < height) maxHeight = height; }); divs.height(maxHeight); alert('after: being ' + $('#being').height()); alert('after: questions ' + $('#questions').height()); $("#main").css('visibility', 'visible'); }

I call this function on document onload event.

Please guide me because this code is working on other pages!

best regards!

EDIT (here is the corrected code):

function doResize() { //alert('before: being ' + $('#beingContent').height()); //alert('before: questions ' + $('#questionsContent').height()); maxHeight = 0; var divs = jQuery("#questionsContent, #beingContent"); $.each(divs, function(){ var height = jQuery(this).height(); if(maxHeight<height) maxHeight = height; }); divs.height(maxHeight); $('#beingContent').css('height', maxHeight - 2); //alert('after: being ' + $('#beingContent').height()); //alert('after: questions ' + $('#questionsContent').height()); $("#root").css('visibility', 'visible'); }

and the CSS:

#beingContent { padding:0 5px !important; border:1px solid black !important ;}

That solved the alignment issue! Thanks.

they have the same height this works fine but you've added padding:5px to div #being and this is problem if you use padding: 0 5px it'll looks ok — arclite
– arclite, Commented Nov 25, 2013 at 1:45

estavillo · Accepted Answer · 2013-11-25 01:45:35Z

Remove borders/padding from css; or use this for the win. :)

Cuz I'm lazy too, just add this to your stylesheet:

/* apply a natural box layout model to all elements */ *, *:before, *:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

Tushar Gupta - curioustushar · Accepted Answer · 2013-11-25 01:46:32Z

0

CSS

#being { padding:0 5px !important; }

div with being has padding :5px so top and bottom gets 5px extra each which create a different so instead of padding :5px just assign padding to left and right .