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.
Best Answer
If you can change the order of the elements, floating will work.
By placing the
div
before theh1
and floating it to theright
, you get the desired effect.