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

alignment, css, html, layout

Solution

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.

Problem

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> ```

Original source