Comment aligner à droite les éléments div?

Question

Le corps de mon document html se compose de 3 éléments, un bouton, un formulaire et un canevas. Je veux que le bouton et le formulaire soient alignés à droite et que le canevas reste aligné à gauche. Le problème est lorsque j'essaie d'aligner les deux premiers éléments, ils ne se suivent plus et sont plutôt côte à côte en horizontal, voici le code que j'ai pour le moment, je veux que le formulaire suive directement après le bouton à droite sans espace entre les deux.

#cTask {
  background-color: lightgreen;
}

#button {
  position: relative;
  float: right;
}

#addEventForm {
  position: relative;
  float: right;
  border: 2px solid #003B62;
  font-family: verdana;
  background-color: #B5CFE0;
  padding-left: 10px;
}

        Créer une tâche

      Nom du client: 
      Téléphone: 
      Adresse e-mail: 

      Votre navigateur ne prend pas en charge le canevas.

Answer 1

Les floats sont corrects, mais posent problème avec IE 6 & 7.
Je préfère utiliser ce qui suit sur la div intérieure :

margin-left: auto; 
margin-right: 0;

Voir le Bug de la Marge Double de IE pour plus de clarification.

Answer 2

Vous pouvez créer une division (div) qui contient à la fois le formulaire et le bouton, puis faire flotter la division sur la droite en définissant float: right;.

Answer 3

Anciennes réponses. Une mise à jour : utilisez flexbox, cela fonctionne pratiquement dans tous les navigateurs maintenant.

  Je suis à droite

Et vous pouvez aller même plus loin, simplement :

  Gauche
  Droite

Et encore plus élaboré :

   Gauche
   Centre
  Droite

Answer 4

Notez que bien que cette réponse n'est pas fausse, la méthodologie est très obsolète, écrite en 2015

---

Les autres réponses pour cette question ne sont pas si bonnes car float:right peut sortir d'une div parent (overflow: hidden pour le parent peut parfois aider) et margin-left: auto, margin-right: 0 n'a pas fonctionné pour moi dans des divs imbriquées complexes (je n'ai pas enquêté pourquoi).

J'ai découvert que pour certains éléments, text-align: right fonctionne, en supposant que cela fonctionne lorsque l'élément et le parent sont tous les deux inline ou inline-block.

Remarque : la propriété CSS text-align décrit comment le contenu en ligne comme le texte est aligné dans son élément de bloc parent. text-align ne contrôle pas l'alignement des éléments de bloc eux-mêmes, seulement leur contenu en ligne.

Un exemple :

        Je suis parent

        Légende pour parent

Voici un JS Fiddle.

Answer 5

Vous pouvez utiliser flexbox avec flex-grow pour pousser le dernier élément vers la droite.

  Gauche
  Droite