How to get width of inline elments when floating elements are place in signle line

Question

I want to get the exact with of inline element ie p tag width. As per dom it show's 600px but it is not the actual width as per how text is rendered.

How to get proper width of p tag ie skipping width which is used by floating div.

This is my html structure

<div id="parent">
 <div id="floating" style="display: block;width: 170px;height: 80px;float: right;background-color: red;">
  Floating div
 </div>
    <div id="child">
        <p id="p1">long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long </p>
    </div>
</div>

jsFiddle link

I want to achieve this with the help of java-script only.

Any suggestions are welcome, thanks for your help.

score 0 · Answer 1 · answered Aug 04 '16 at 13:37

    var parentWidth = $("#parent").width(); 
    var floatDivWidth = $("#floating").width();
    var pWidth = parentWidth-floatDivWidth; //width of <p> tag
    
    alert(pWidth);

#parent {
    width: 600px;
    background-color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="parent">
 <div id="floating" style="display: block;width: 170px;height: 80px;float: right;background-color: red;">
  Floating div
 </div>
    <div id="child">
        <p id="p1">long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long </p>
    </div>
</div>

https://jsfiddle.net/q98L4hqu/1/

If I don't have reference to floating div. Nor i has and div or class div, than how i can get it width? — Joyston Colaco, Aug 05 '16 at 05:24

score 0 · Answer 2 · edited May 23 '17 at 10:28

use

alert(document.getElementById("p1").offsetWidth)

Example

<div id="parent">
 <div id="floating" style="display: block;width: 170px;height: 80px;float: right;background-color: red;">
  Floating div
 </div>
    <div id="child">
        <p id="p1">long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long </p>
    </div>
</div>

<script>
alert(document.getElementById("p1").offsetWidth)
</script>

Ref from : How do I retrieve an HTML element's actual width and height?

How to get width of inline elments when floating elements are place in signle line

2 Answers2