Расчёт налету и при ресайзе

Резсайзь окно, тут не работает (window).load

by vovkasolovev

HTML

<p>
    <button id="btn_menu_width">btn_menu_width()</button>
    <button id="btn_menu_left_width">btn_menu_left_width()</button>
    <button id="btn_menu_right_width">btn_menu_right_width()</button>
    <button id="btn_menu_gap_width">btn_menu_gap_width()</button>

</p>
<p id="output"></p>

<div id="menu_toolbar">
    <div id="menu_left">Logo</div><div id="menu_gap"></div><div id="menu_right">About Portfolio</div>
</div>

CSS

#menu_toolbar{width:100%; background: #eee}
div{display: inline-block; margin:0; padding:0}

JavaScript

$('#btn_menu_width').click(function() {
    $('#output').text($('#menu_toolbar').width());
});
$('#btn_menu_left_width').click(function() {
    $('#output').text($('#menu_left').width());
});
$('#btn_menu_right_width').click(function() {
    $('#output').text($('#menu_right').width());
});
$('#btn_menu_gap_width').click(function() {
    $('#output').text($('#menu_gap').width());
});



// Функция высчитывания промежутка между левым и правым меню, для того чтоб не использовать float на правом меню
function set_menu_gap(){
	var menu_width = $('#menu_toolbar').outerWidth();
	var menu_left_width = $('#menu_left').outerWidth();
	var menu_right_width = $('#menu_right').outerWidth()+1;
	var menu_gap_width = menu_width - menu_left_width - menu_right_width;
	$('#menu_gap').css('width',menu_gap_width);
	$('#menu_right').css('float','none');
	$('#menu_gap').text(menu_width+'-'+menu_left_width+'-'+menu_right_width+'='+menu_gap_width);
};
$(window).load(function(){set_menu_gap();});
$( window ).resize(function(){set_menu_gap();});