Question

I am using below code to equal column height but its not calculating padding in it and so text going out of the div.

<script>
        $(document).ready(function(){
            //set the starting bigestHeight variable
            var biggestHeight = 0;
            //check each of them
            $('.equal').each(function(){
                //if the height of the current element is
                //bigger then the current biggestHeight value
                if($(this).height() > biggestHeight){
                    //update the biggestHeight with the
                    //height of the current elements
                    biggestHeight = $(this).height();
                }
            });
            //when checking for biggestHeight is done set that
            //height to all the elements
            $('.equal').height(biggestHeight);

        });
    </script>

Answer 1

Try to use .outerHeight()

http://api.jquery.com/outerHeight/

• .height() = Height
• .outerHeight() = Height + Padding + Border
• .outerHeight(true) = Height + Padding + Border + Margin

If you have images inside your elements you should just wait for the images have been loaded using $(window).load()

    $(window).load(function(){ // wait for all content and images are loaded
        var biggestHeight = 0;
        $('.equal').each(function(){
            if($(this).height() > biggestHeight){
                biggestHeight = $(this).height();
            }
        });
        $('.equal').height(biggestHeight);
    });