StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p><strong>[Update]</strong></p> <p>The original answer was written prior to jQuery 1.3, and the functions that existed at the time where not adequate by themselves to calculate the whole width.</p> <p>Now, as <a href="https://stackoverflow.com/questions/349705/total-width-of-element-including-padding-and-border-in-jquery/673622#673622">J-P</a> correctly states, jQuery has the functions <a href="http://docs.jquery.com/CSS/outerWidth" rel="nofollow noreferrer">outerWidth</a> and <a href="http://docs.jquery.com/CSS/outerHeight" rel="nofollow noreferrer">outerHeight</a> which include the <code>border</code> and <code>padding</code> by default, and also the <code>margin</code> if the first argument of the function is <code>true</code> </p> <hr> <p><strong>[Original answer]</strong></p> <p>The <code>width</code> method no longer requires the <code>dimensions</code> plugin, because it has been added to the <code>jQuery Core</code></p> <p>What you need to do is get the padding, margin and border width-values of that particular div and add them to the result of the <code>width</code> method</p> <p>Something like this:</p> <pre><code>var theDiv = $("#theDiv"); var totalWidth = theDiv.width(); totalWidth += parseInt(theDiv.css("padding-left"), 10) + parseInt(theDiv.css("padding-right"), 10); //Total Padding Width totalWidth += parseInt(theDiv.css("margin-left"), 10) + parseInt(theDiv.css("margin-right"), 10); //Total Margin Width totalWidth += parseInt(theDiv.css("borderLeftWidth"), 10) + parseInt(theDiv.css("borderRightWidth"), 10); //Total Border Width </code></pre> <p><em>Split into multiple lines to make it more readable</em></p> <p>That way you will always get the correct computed value, even if you change the padding or margin values from the css</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload