I can't get a Div's width using element.style.width. Do I have to use element.clientWidth instead?
<p>I think I'm going mad!</p>

<p>I'm starting to write a little exercise for myself where I am going to have some divs that I can drag on the rightborder to increase or decrease the Div width. I also have a container Div that has a set width and I'm going to use this to determine a percentage - basically I'm going to be making some kind of bar-chart / histogram that you can edit.</p>

<p>I'm started writing my code and I thought I'd just make sure I could output the percentage.</p>

<p>Here's the perliminary code....</p>

<pre><code>&lt;style&gt;
#container{width:500px;}
#dragDiv{border:1px solid #000;background-color:pink;width:100px;height:100px;}
&lt;/style&gt;
&lt;/head&gt;

&lt;body&gt;

&lt;div id="container"&gt;
    &lt;div id="dragDiv"&gt;&lt;/div&gt;
&lt;/div&gt;

&lt;script&gt;

    function dragOneSide(innDiv, outDiv){

        if(document.getElementById(innDiv) &amp;&amp; document.getElementById(outDiv)){

        var iDiv = document.getElementById(innDiv),
            oDiv = document.getElementById(outDiv);

            // write out the width as a percentage
            var iDivWidth = parseInt(iDiv.style.width),
                oDivWidth = parseInt(oDiv.style.width);
                //alert(document.getElementById("dragDiv").style.width);
                iDiv.innerHTML = ((iDivWidth / oDivWidth) * 100);
        }   
    }

    window.onload = function(){
        dragOneSide("dragDiv", "container");
    }

&lt;/script&gt;
</code></pre>

<p>Now the value in the iDiv was NaN? I found that rather odd. When trying to alert width I was getting a blank, literally an empty string! Rather odd I thought, especially as I wasn't trying to do anything complicated. I used firebug, set a breakpoint and observed the watch window. There was no value for the Div's width. I then put an inline style on the DIV like so...</p>

<pre><code>&lt;div id="container"&gt;
    &lt;div id="dragDiv" style="width:300px;"&gt;Hello World&lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>and low and behold I was now getting a value for the item! Now I don't like inline styles (who does) however I've never had this problem before and I've been using JavaScript and HTML for years - has anyone got an explaination for this? To retrieve the width not set by CSS do I have to use a different property like <code>clientWidth</code>? </p>

<p>Ps. I haven't included any of the dragging code yet so please don't point that out.</p>
