Facebook-like friend selection checkbox - html

Question

I'm trying to code a selection like the Facebook "invite friends" selection. I like it because it uses the default checkboxes and not a background simulating the selection of each item.
The problem is that I cannot figure out how can they make the text (friend's name) break into two lines if needed (text is too big)!
I have a simplified example of what I'm trying to achieve. Here's the HTML:
<div class="modal">
<div class="modal-body">
<ul class="unstyled">
<li class="store_selectable">
<input class="checkbox" type="checkbox">
<a href="#">
<div class="store-text">
<div class="iblock"><img alt="Missing" src="http://placehold.it/30x30"></div>
<div class="text"><div>This is the store</div></div>
</div>
</a>
</li>
</ul>
​
And here's the CSS:
body {
padding: 20px;
}
li.store_selectable {
width:161px;
float:left;
margin:0 0px 6px 0px;
overflow:hidden;
font-size:0.9em;
}
li.store_selectable .checkbox {
float:left;
display:inline-block;
margin:12px 6px 0;
}
li.store_selectable .store-text {
display:block;
height:30px;
}
li.store_selectable img {
float:left;
display:block;
width:30px;
height:30px
}
li.store_selectable a {
display:block;text-decoration:none;
padding:2px;
outline:none;
color:#333;
border:1px solid #fff;
border-width:1px 0;
}
li.store_selectable a:hover {
background:cyan;
border:1px solid blue;
border-width:1px 0;
}
li.store_selectable .iblock {
display:inline-block;
vertical-align:middle;
overflow:hidden;
text-align:left;
}
For an easier testing and understanding I've created a jsfiddle here: http://jsfiddle.net/rikas/tpqHd/1/
Now, what I'm trying to do is breaking the text in two lines if the width of the list item is small enough, changing this line: width:161px;. Messing with facebook "invite friends" modal window CSS I can see that they do it, but I can't!
Thanks for your help!

Answer 1

Not quite sure of the interface you are trying to achieve, but the reason for text not wrapping is the css
overflow:hidden;
after removing that consider putting your checkbox and
the text its own div element with class .fl
.fl { display:block; }
to line them side by side
directly under the two create another empty div element with the class of .clear
.clear { display:block; clear:both; line-height:0; }
to prevent the next element inheriting the float:left