Simple CSS problem: Title text on upper left, Button on the upper right

Question

I have a page where I need a piece of text to appear aligned to the upper left of an absolutely positioned element (a span, if it matters), and a button to appear aligned to the upper right of the same element. edit: Problem with this is even when I use float: right; and display: inline; the button still likes to drop the next line.

Currently my solution is to wrap the button with a span element, float the span to the right, and then set the button to absolute position. Problem with this is it doesn't appear unless I manually specify the width of the wrapper span to fit whatever size the browser renders the button. Which is kinda dumb.

What's the proper way to do this?

edit 2: Here was my original code:

#header
{
 position: absolute;
 top: 0;
 bottom: auto;
 left: 0;
 width: 100%;
 height: 24px;
 overflow: hidden;
}


/* Header's buttons. */
#header > span
{
 float: right;
 width: 100px;
}
#header > span > button
{
 position: absolute;
}

And the HTML:

<span id="header">
 Trigger editor
 <span><button type="button" id="h_output">Output Triggers</button></span>
</span>

Answer 1

I believe 'the proper' way it to use DIVs (not SPANs) for element positioning. But yes, you'd have to set the width explicitly on the floated DIV on the left, otherwise it'll take up the whole line (being a block element and all). Just make sure that your width is enough to show all contents of the DIV without overflowing.

Answer 2

Hope I understood correctly.

<div class="clearfix">
  <div style="float:left">Text</div>
  <div style="float:right">Button</div>
</div>

Where clearfix is the famous one (http://www.456bereastreet.com/archive/200603/new_clearing_method_needed_for_ie7/). In this way I don't think you need to explicitely set the width of the text or the button.