Как определить ширину элемента

[Kein]

Пытаюсь получить ширину DOM объектов, которые содержит 2+ DIV'а, первый 308px, другие по 200px
Пытаюсь получить ширину:
alert(this.clientWidth + ' ' + (this['getWidth']?this.getWidth():'')+' -');

Результат:
Chrome: 800
Opera: 708
FF: 783
IE: 714

Причем если смотреть в отладчиках, все браузеры показывают 908 px корректные.
Просчет выполняется после загрузки DOM стили хранятся в HTML файле, так что поздней загрузки быть не может.
Не пойму что делать.

Нужно это для блока:
<div class="scroll_area" id="scroll">
<div class="area" id="area">
<div class="category">
[..]
</div>
</div>
</div>
Где
#scroll {position:realtive; } #area {position:absolute;} и для area вычисляется ширина что бы был корректной длины горизонтальный скролл.
Может я не знаю чего-то и можно все это сделать без JS?

P.S в блок #area походу выполнения будут еще добавляться блоки div.category;

[Kolyaj]

Как определить ширину элемента

offsetWidth

[Kein]

Результат аналогичен, во всех браузерах

Upd: что интересно, в последующем функция выдает правильный результат

[Skipp]

Забавно 308 + (2 * 200) будет 708, а не 908.
Покажи весь код.

[Kein]

Весь код приводить не буду, слишком много левых данных:
Это расчет ширины, area jquery объект

area.children().each(function(i){
            //alert(this.offsetWidth + ' ' + (this['getWidth']?this.getWidth():'')+' -');
            width += parseInt(this.offsetWidth);
        });
area.css('width', width);

<div id="scroll_wraper">
<div class="scroll_area" id="scroll">
<div class="area" id="area">
    <div class="category">
        <div class="category-image"><img src="img/1.jpg"/></div>
        <div class="category-block">Some text</div>
        <div class="category-block">Some text</div>
        <div class="category-block">Some text</div>
    </div>
    <div class="category">
        <div class="category-image"><img src="img/1.jpg"/></div>
        <div class="category-block">Some text</div>
        <div class="category-block">Some text</div>
        <div class="category-block">Some text</div>
    </div>
    <div class="clear"></div>
</div>
</div>
<div class="menu"></div>
</div>
<style>
.clear{clear: both; width: 0;}
.category {
    float: left;
}
.category .category-block, .category .category-image{
    float: left;
}
.category .category-block{
    width: 200px;
}
.category .category-image{
    width: 308px;
}
.scroll_area{
    width: 800px; height: 368px; overflow: auto;
    position: relative;
}
.scroll_area .area{
    position: absolute;
    left: 0; top: 0;
    height: 232px;
}
.scroll_area img {
    float: left;
}
</style>

Вот примерно так, как уже писал выше проверка размера вызывается только после DomLoaded.

[Skipp]

А стили у тебя так же идут после элементов? И js у тебя идёт в каком месте, в head?

[Kein]

Js идет в head, а стили так и идут, прямо в хтмле

[Skipp]

поставь стили в head, ради интереса

[Kein]

То же самое.