Question

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:

Label : [button1 : button2]

All on a single line. The square brackets represent the fixed width of 182px.

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.

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?

  <div id="container">
    <span id="label"><p>song title</p></span>
    <span id="buttons"><img src="resources/images/fill.gif" width="1" height="1"><a href="#" class="button88x31">edit</a><img src="resources/images/fill.gif" width="1" height="1"><a href="#" class="button88x31">delete</a></span>
  </div>

Answer 1

This can be done easily with block elements.

The #label element would automatically fill the full width (no need for width:100%). If you leave a margin at the right of the element, and let #buttons floating to the right, this will do exactly what you want.

#label {
    display: block;
    margin-right: 100px;
}
#buttons {
    width: 100px;
    float: right;
}

Try this here: http://jsfiddle.net/nPBak/1/

(notice that you have to move #label after #buttons)