title: Making two spans fill a div; one span is fixed with, the other isn't?
body: <p>I'm currently working on a new project. I've got a div which acts as a container "container" and inside this there are two span tags; "label" and "buttons". The buttons span tag has two links inside of it and my css changes the a tag and styles it like a button (this is okay). The buttons span tag is told to float to the left, and has a set width of 182px.
  The label span tag is where the text description goes (and is has a set height, and a background colour). Essentially it should look like this:</p>
  
  <p>Label : [button1 : button2]</p>
  
  <p>All on a single line. The square brackets represent the fixed width of 182px.</p>
  
  <p>The problem I'm having is that I can't figure out how to make "Label" take up the remaining space.
  Label can't be a fixed width because I want the same element to be able to be used regardless of the size of the container (this varies between pages). But when I set it to 100% it takes up the full line and pushes the buttons onto a new line.</p>
  
  <p>Ideally I'd like to be able to use some css like "100% - 182px", but I know css doesn't support this. Does anyone have any suggestions on what I could do to get this working?</p>
  
  <pre><code>  &lt;div id="container"&gt;
      &lt;span id="label"&gt;&lt;p&gt;song title&lt;/p&gt;&lt;/span&gt;
      &lt;span id="buttons"&gt;&lt;img src="resources/images/fill.gif" width="1" height="1"&gt;&lt;a href="#" class="button88x31"&gt;edit&lt;/a&gt;&lt;img src="resources/images/fill.gif" width="1" height="1"&gt;&lt;a href="#" class="button88x31"&gt;delete&lt;/a&gt;&lt;/span&gt;
    &lt;/div&gt;
  </code></pre>