After incorporating your code into the jsbin.com example, it became evident why it doesn't work for the given scenario. I introduced a situation where word wrapping would come into play. Feel free to take a look at it here: http://jsbin.com/osopid/1, and view the code here: http://jsbin.com/osopid/2/edit
<div class='jfmfs-friend' id='123'>
<input type='checkbox' click='width()'/>
<img src='id.jpg'/>
<!-- 78px shows no wrapping of the following div -->
<div id='restrictedWidth' class='friend-name'>Himanshu Yadav</div>
<div id='dbg'></div>
</div>
<div class='jfmfs-friend' id='123'>
<input type='checkbox' click='width()'/>
<img src='id.jpg'/>
<!-- 164px shows wrapping of the following div -->
<div id='restrictedWidth2' class='friend-name'>Himanshu Yadav with more text proving that word wrap is working</div>
<div id='dbg2'></div>
</div>
It's important to note the inclusion of word-wrap in the styling:
.jfmfs-friend {
cursor:pointer;
display:inline-block;
float:left;
height:56px;
margin:3px;
padding:4px;
width:176px;
border: 1px solid #FFFFFF;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-webkit-user-select:none;
-moz-user-select:none;
}
.jfmfs-friend div {
color:#111111;
font-size:11px;
overflow:hidden;
display:inline-block;
}
div.friend-name {
margin-left: 10px;
white-space: pre-wrap;
word-wrap: normal;
border: 1px solid #000000;
}
I also included some jQuery to display the widths for inspection:
$('#dbg').html('<div>'+$('#restrictedWidth').css('width')+'</div>');
$('#dbg2').html('<div>'+$('#restrictedWidth2').css('width')+'</div>');
I conducted these tests on Chrome. What browser are you currently using?