jquery width() not working with text

Question

I have two containers with text in them, and I'm trying to get their widths and add them together. I've set up a jsfiddle but it doesn't seem to work at all and I'm not sure why. I've used both width() and innerWidth().

this is the fiddle: http://jsfiddle.net/a83C6/

and this is the code:

HTML:

<div class="text-1">hello</div>
<div class="text-2">hello</div>

<div class="length"></div>

CSS:

.length {
  border:1px solid red;
  height:5px;
}

JS:

$(document).ready(function() { 
  $(".length").css({
    width:$(".text-1").innerWidth() + $(".text-2").innerWidth() 
  });
});

Seems to work fine. Each div is taking up the full length of the page. Times two and it's what you see. — j08691
– j08691, Commented Nov 27, 2013 at 20:00

PSL · Accepted Answer · 2013-11-27 20:08:35Z

1

div is a block level element so it takes the full width of the container, so adding them together of course will have the full width of both of them doubled up, If you want to take your div's take the actual width of its content alone, you can change it to inline-block or float it and calculate the width based on that.

Fiddle

You can do this without using JS as well, you can add a container

<div class="container">
    <div class="text-1 text">hello</div>
    <div class="text-2 text">hello</div>
    <div class="length"></div>
</div>

and

.container, .text {
    display:inline-block;
}

Fiddle

edited Nov 27, 2013 at 20:08

answered Nov 27, 2013 at 19:59

PSL

124k21 gold badges257 silver badges243 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

jquery width() not working with text

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related