Floating divs to auto shrink to text size

CSS

a:link { color:white }
img {
    height:600px;
    width:300px;
    position: relative;
}
ul {
    list-style-type: none;
    padding:0;
}

#container {
    top:30px;
        padding:5px 0px 5px 0px;
        position: absolute;
        width:300px;        
}

.item {
    float:left;
    background: rgba(0, 0, 0, 0.5);
    height:25px;
    margin: 5px;
    padding:10px;
    clear:both;
}

HTML

<img src="http://subtlepatterns.com/patterns/tileable_wood_texture.png" >

<div id="container">
  <ul>
      <li><a href="#"><div class="item">My</div><a></li>
      <li><a href="#"><div class="item">supar long link hax</div><a></li>
      <li><a href="#"><div class="item">brings all the</div><a></li>
      <li><a href="#"><div class="item">divs inside the container.</div><a></li>
  </ul>
</div>

Preview

http://jsfiddle.net/mztriz/xbvmf/

A code snippit to show that divs can be auto resized by text length.
Works by floating the div to the left and then clearing it after.