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

Si vous avez plusieurs divs que vous souhaitez aligner côte à côte à l'extrémité droite du div parent, définissez text-align: right; sur le div parent.

Answer 2

Voulez-vous dire comme ceci? http://jsfiddle.net/6PyrK/1

Vous pouvez ajouter les attributs de float:right et clear:both; au formulaire et au bouton

Answer 3

La réponse simple est ici :

    n'importe quoi :

Answer 4

Peut-être juste:

  marge: auto 0 auto auto;

Answer 5

Si vous n'avez pas à supporter IE9 et en dessous, vous pouvez utiliser flexbox pour résoudre ce problème: codepen

Il y a aussi quelques bugs avec IE10 et 11 (support flexbox), mais ils ne sont pas présents dans cet exemple

Vous pouvez aligner verticalement le et le

en les enveloppant dans un conteneur avec flex-direction: column. L'ordre source des éléments sera l'ordre dans lequel ils sont affichés de haut en bas, donc je les ai réordonnés.

Ensuite, vous pouvez aligner horizontalement le formulaire et le conteneur de boutons avec le canevas en les enveloppant dans un conteneur avec flex-direction: row. Encore une fois, l'ordre source des éléments sera l'ordre dans lequel ils sont affichés de gauche à droite, donc je les ai réordonnés.

De plus, cela nécessiterait que vous supprimiez toutes les règles de style position et float du code lié dans la question.

Voici une version simplifiée de l'HTML dans le codepen lié ci-dessus.

Et voici le CSS pertinent

#mainContainer {
  display: flex;
  flex-direction: row;
} 

#formContainer {
  display: flex;
  flex-direction: column;
}