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.
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; }
.
section {
position: relative;
width: 50%;
border: 1px solid;
}
h1 {
display: inline;
}
div {
position: relative;
float:right;
top: 0;
right: 0;
}
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;
}
?
This worked for me:
h1 {
display: inline;
overflow: hidden;
}
div {
position: relative;
float: right;
}
It's similar to the approach of the media object, by Stubbornella.
Edit: As they comment below, you need to place the element that's going to float before the element that's going to wrap (the one in your first fiddle)
Source: Stackoverflow.com