Question

I’m trying to get the width of a div container to set another css attribute in another div to the width of the first one, which I know after the page was fully loaded and rendered.

I have this code:

$().ready(function() {
    doLayout();
}
function doLayout() {
    var $width = $("#sidebar").attr("width");
    $("#content").css("left", width);
}

The problem is, the ready is called before the page is rendered and thus width attribute is not set (or “undefined”). How can I determine the current width?

EDIT:
After suggested changes I have this fiddle but the code there is working, but in my real application it’s not. So the problem is somewhere else, I guess 🙁

Answer 1

Use load to wait for all images/external content to load as well, as these could alter element dimensions:

$(window).load(function () {
    doLayout();
});

Then to get the computed width, use width:

$("#content").width(); // width in px