Flotter une div dans le coin supérieur droit sans chevauchement de la tête de la fratrie

Avoir un div et un h1 à l'intérieur d'une section, comment dois-je faire flotter le div dans le coin supérieur droit, sans le dépasser, le texte de l'en-tête ?

Le code HTML est le suivant:

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

À l'aide de ce code CSS:

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

À l'aide de ce code CSS:

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

Je sais qu'il ya beaucoup de questions similaires, mais je ne pouvais pas en trouver un à la résolution de cette affaire.

source d'informationauteur Maxime R.

  1. 9

    Un autre problème résolu par le canard en caoutchouc:

    Le css est juste, mais vous avez encore de se rappeler que le code HTML les éléments de commande des questions: la div doit venir avant l'en-tête. http://jsfiddle.net/Fq2Na/1/
    Flotter une div dans le coin supérieur droit sans chevauchement de la tête de la fratrie

    Modifier votre code HTML pour avoir la div avant de l'en-tête:

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

    Et de garder votre CSS pour la simple div { float: right; }.

  2. 1

    De se débarrasser de votre <Button> envelopper div à l'aide de display:block et float:left dans les deux <Button> et <h1> et de préciser leurs width avec un position:relative à votre Section. Cette approche a l'avantage de ne pas avoir un autre div seulement de la position de votre <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;
}

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

}
  4. 0

    Cela a fonctionné pour moi:

    h1 {
    display: inline;
    overflow: hidden;
}
div {
    position: relative;
    float: right;
}

    Il est similaire à l'approche de l'objet multimédia, par Stubbornella.

    Edit: Comme ils le commentaire ci-dessous, vous devez placer l'élément qui va flotter avant de l'élément qui va le wrap (un dans votre premier violon)