CODEWITHSUNDEEP
javascriptjqueryhtml
Agent Smith
Agent Smith

Reputation: 23

JQuery Same Height DIVs

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.

Upvotes: 1

Views: 113

Answers (2)

Tushar Gupta - curioustushar
Tushar Gupta - curioustushar

Reputation: 57105

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 .

Upvotes: 0

estavillo
estavillo

Reputation: 139

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;
}

Upvotes: 1

Related Questions