<html>
<head><style>
  .float   { float: left }  /* Just using for shrink-wrapping */
  .orange  { background: orange }
</style></head>
<body>
  The orange box should only be as wide as its text.<br>
  <div class="float orange">foo</div>
</body>
</html>