Изменение ширины div-ов
 

на странице 4 колонки (резиновые, 25% каждая по ширине). от краев страницы до колонок и между ними нужны фиксированные промежутки в 10px. средствами html\css не смог придумать, как уместить на странице все 4 колонки, кроме уменьшения размера каждой до 24%. иначе 4-ая колонка размещается под 3-ей.

решил узнать ширину document, вычесть сумму промежутков и поделить на 4 (в ие результат получался больше, пришлось уменьшать на 6:

$(document).ready(function(){
var x=0
if ($.browser.msie) {
x=x+6;
 }
$('div#content').css('width', ($(document).width()-50)/4-x); 
});

все работает как надо, если не изменять размер окна. при уменьшении ширины окна браузера, последняя колонка(и) съезжают под предыдущую. а если потом развернуть окно на максимум, то колонки остаются узкими. если обновить страницу, то колонки отображаются как надо по ширине.

вопрос: можно как-то "отловить" изменение размеров окна браузера и обновлять ширину колонок без обновления страницы пользователем?

пробовал вставлять в resize например изменение фона элемента - меняется, а вот чтобы отразились изменение ширины колонок, надо их load'ом перезагружать? другого варианта нет?

так работает, спасибо.

$(document).ready(function(){
var x=0;
        if ($.browser.msie) {
            x=x+6;
        }
        $('div#content').css('width', ($(document).width()-50)/4-x);
});
$(window).resize(function() {
        var x=0;
        if ($.browser.msie) {
            x=x+6;
        }
        $('div#content').css('width', ($(document).width()-50)/4-x);
});

повторяющийся код в одну функцию занесу.