Resizing DIVs On Browser Load And Resize

I will take Jelo over jQuery any day, but I had to tread in murky waters today making an update to a theme on one of my WordPress blogs.

I had a three column layout, the two sidebars were floated to the right properly, but the text in my main content div was going under my sidebars, to the full 100% width of the page. I couldn’t find a quick CSS solution without rewriting the structure of the page, so I decided to use jQuery, which was already loaded to handle some animations in the menu.

$(document).ready(function() {
  $('#content').css("width", ($(window).width() - $('#sidebar1').width() - $('#sidebar2').width()) + 'px');
});
$(window).bind('resize', function () {
  $('#content').css("width", ($(window).width() - $('#sidebar1').width() - $('#sidebar2').width()) + 'px');
});

Hope this was helpful to some one in some fashion!

One Response to “Resizing DIVs On Browser Load And Resize”

  1. HB  on August 7th, 2010

    This should do the same (but obviously not necessary if you already have jQuery on the page and do not already have Jelo on the page):

    Jelo.onReady(function() {
    var css = Jelo.css;
    css($(‘#content’), ‘width’,
    Jelo.Env.getViewportWidth() –
    css($(‘#sidebar1?), ‘width’) –
    css($(‘#sidebar2?), ‘width’) + ‘px’);
    Jelo.on(window, ‘resize’, function() {
    css($(‘#content’), ‘width’,
    Jelo.Env.getViewportWidth() –
    css($(‘#sidebar1?), ‘width’) –
    css($(‘#sidebar2?), ‘width’) + ‘px’);
    });
    });


Leave a Reply