Calculating width of a floating element

Question

you can see for example in wikipedia here: http://en.wikipedia.org/wiki/United_States The second pargraph starting with "At 3.79 million square miles". If you check the width of this pharagraph it will give you the full width including the width of the floating right element '.infobox' http://imageshack.us/photo/my-images/38/54351130.jpg/

But I need to get the Exact width of the pharagraph displayed to the user (which is the pharagraph width - the infobox etc'). However assuming I have no idea that there is a floating element and I want javascript to calculate the exact displayed width of the contect. Thank you.

Edit: Here is an example to the problem: http://jsfiddle.net/guy_l/sj3Zp/2/ Scrolling through the DOM I get the same results however the calculated witdh is different.

Answer 1

Here is your scenario with a jQuery solution which works fine:

<script>

    // with all margins and paddings
    var w1  = $('.c_2').outerWidth(true);
    var w2  = $('.c_3').width();

    alert ('Calculated width: ' + w2 + ' - ' + w1 + ' = ' + ( w2-w1) );

</script>

<style>

    .c_1 {
        border:         1px solid red;
    }

    .c_2 {
        float:          right;
        width:          22em;
        height:         200px;
        margin:         0px 20px;
        padding:        0px 20px;
        border:         1p solid orange;
    }

    .c_3 {
        border:         1px solid blue;
    }

</style>

<div class="c_1">

    <div class="c_2">
        Infopanel
    </div>

    <p>
        Some paragraph
    </p>
    <p class="c_3">
        The interesting paragraph
    </p>

</div>