title: CSS floating multiple elments in a row
body: <p>I have a panel div with a title bar div. In the title bar, I may have several different icons on the right side (to be determined at runtime). I'm trying to construct the CSS so the icons will always stack as far to the right as possible, and also have it that the title text doesn't run over the icons (ie, it'll wrap around to a new line if necessary). I just haven't been able to get it right. For my icons, I have <code>&lt;img class="icon" ...&gt;</code> where </p>
  
  <pre><code>.icon {
  display: block;
  float: right;
  padding-left: 4px;
  }
  </code></pre>
  
  <p>The icons appear fine on their own. But when I try to add the actual title is when things get wonky. I can't seem to get the title to take up the remaining space to the left correctly. The div (or span, which I've tried) will either be completely below or above the icons. Or sometimes, it'll force the icons to stacked vertically on the right, depending on the length of the title.</p>
  
  <p>So in essence, what I'm looking for is one or more small fix-sized elements stacked horizontally to the upper right, and a longer element to take up the remaining space to the left, and this last element may end up taking more space vertically depending on if there's any text wrapping.</p>
  
  <p>Any help would be greatly appreciated!</p>