(window).load or (document).ready to initiate page?

(window).load or (document).ready to initiate page?

I've been working on a page, with help from people here, and learning jquery. One of the things the jquery script does is to display a sum (a dollar value) of options selected. There is a starting cost for the item, and the options selected change the final cost. So, when the page loads, it will display a dollar value of like $5.00. Initial value and option values are stored in hidden inputs, which I didn't include here.

    jQuery(function($) {
        $.fn.total = function() {
            var sum = 0;
            $('[name^=optioninput]').each(function() {
                sum += parseFloat($(this).val());
            });
            $('.costspan').text(sum.toFixed(2));
        };
    });  
    $(window).load(function() {
        $('body').total();
    });

This works fine.

Upon further page development, I found that I needed to format the page layout so that I had a fixed width center column, and a fluid width column on either side. I found a jquery example where the width of the side columns was calculated when the page loads.

$(document).ready(function() {
    $(window).on('resize', function() {
         $('#containerleft, #containerright').css('width',($('body').width()-$('#containermid').width())/2);
    }).trigger('resize');
    });

So, adding this bit of code to what I had (placing it ahead of the sum calculation code) prevents the sum calculation code from running when the page loads. I'm assuming that the (document).ready code handles the load event, and by the time the browser runs the code for the sum calculation ( $(window).load(function() ), the load event has past.

So, I need to combine these two things. But, I'm confused has to what the best way is to do that. I've seen a lot of stuff that says to use $(document).ready. I've seen stuff that says don't. Whats the best way to write code for a page load event?

Thank you,