Simple CSS issue: header text in the upper left corner, button in the upper right corner

Question

I have a page where I need a piece of text that will be displayed in the upper left corner of an absolutely positioned element (if this is important), and a button that will be aligned in the upper right corner of the same element. edit: Problem with this, even if I use float: right;and display: inline;, the button still likes to throw the next line.

My current solution is to wrap the button with a span, swim right to right, and then set the button to its absolute position. The problem with this is that it does not appear unless I manually specify the width of the wrapper range so that it matches any browser size that the button displays. Which is stupid.

What is the right way to do this?

edit 2: Here is my original code:

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


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

And HTML:

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

Answer 1

I hope I understood correctly.

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

clearfix (http://www.456bereastreet.com/archive/200603/new_clearing_method_needed_for_ie7/). , , .

Answer 2

"" DIV ( SPAN) . , DIV , ( ). , , DIV .