jQuery: get div-width after document is ready and rendered

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

Answer 2

A div will have no attribute of width. It may have a CSS style property of width, which you can retrieve using .css('width'), but you may also be interested in outerWidth() or innerWidth() or width() which return the width computed by JavaScript.

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

A good explanation of how the above mentioned width methods differ can be read in the documentation, but simply;

1. outerWidth() takes into account padding + margin
2. width() takes padding into account
3. innerWidth() takes neither into account.