Float a div in top right corner without overlapping sibling header

Question

Having a div and a h1 inside a section, how do i float the div in the top right corner without overlapping the text of the header ?

The HTML code is the following:

<section>
  <h1>some long long long long header, a whole line, 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6</h1>
  <div><button>button</button></div>
</section>

• I tried an absolute position relative to the parent but the text is overlapped, http://jsfiddle.net/FnpS8/2/

  

Using this CSS code:

section { position: relative; }
h1  { display: inline; }
div {
    position: absolute;
    top: 0;
    right: 0;
}

• I tried floating the div to the right but it doesn't remain in the top right corner, http://jsfiddle.net/P6xCw/2/

  

Using this CSS code:

h1  { display: inline; }
div { float: right;    }

​

I know there is a lot of similar questions but I couldn't find one solving this case.

Answer 1

If you can change the order of the elements, floating will work.

section {    position: relative;    width: 50%;    border: 1px solid;  }  h1 {    display: inline;  }  div {    float: right;  }

<section>    <div>      <button>button</button>    </div>      <h1>some long long long long header, a whole line, 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6</h1>  </section>

​By placing the div before the h1 and floating it to the right, you get the desired effect.

Answer 2

Another problem solved by the rubber duck:

The css is right but you still have to remember that the HTML elements order matters: the div has to come before the header. http://jsfiddle.net/Fq2Na/1/

Change your HTML code to have the div before the header:

<section>
<div><button>button</button></div>
<h1>some long long long long header, a whole line, 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6</h1>
</section>

And keep your CSS to the simple div { float: right; }.

Answer 3

Get rid from your <Button> wrap div using display:block and float:left in both <Button> and <h1> and specifying their width with a position:relative to your Section. This approach has the advantage of not needing another div only to position your <Button>

html

<section>  
    <h1>some long long long long header, a whole line, 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6</h1>     
    <button>button</button>
</section>

​ css

section {
    position: relative;
    width: 50%;
    border: 1px solid;
    float:left;
}
h1 {
    display: block;
    width:70%;
    float:left;
}
button
{
    position:relative;
    top:0;
    left:0;
    float:left;
}

​