Как правильно выровнять элементы div?

floats в порядке, но проблематично с ie6 и 7.

Я бы предпочел использовать margin-left:auto; margin-right:0; во внутреннем div.

Старые ответы. Обновление: используйте flexbox, почти все работает во всех браузерах.

<div style="display: flex; justify-content: flex-end">
  <div>I'm on the right</div>
</div>

И вы можете стать еще более приятным, просто:

<div style="display: flex; justify-content: space-around">
  <div>Left</div>
  <div>Right</div>
</div>

И fancier:

<div style="display: flex; justify-content: space-around">
   <div>Left</div>
   <div>Middle</div>
  <div>Right</div>
</div>

Другие ответы на этот вопрос не так хороши, так как float:right может выходить за пределы родительского div (возможно, переполнение: скрытый для родителя) и margin-left: auto, margin-right: 0 для меня не работали в сложных вложенных div (я didn не исследуйте почему).

Я выяснил, что для некоторых элементов text-align: right работает, считая, что это работает, когда элемент и родительские элементы являются как inline или inline-block.

Примечание. Свойство text-align CSS описывает, как встроенный контент, такой как текст, выравнивается в его родительском блочном элементе. text-align не контролирует выравнивание самих элементов блока, а только их встроенное содержимое.

Пример:

<div style="display: block; width: 80%; min-width: 400px; background-color: #caa;">
    <div style="display: block; width: 100%">
        I'm parent
    </div>
    <div style="display: inline-block; text-align: right; width: 100%">
        Caption for parent
    </div>
</div>

Здесь JS Fiddle.

Вы имеете в виду это? http://jsfiddle.net/6PyrK/1

Вы можете добавить атрибуты float:right и clear:both; к форме и кнопке

Если у вас есть несколько div, которые вы хотите выровнять бок о бок в правом конце родительского div, установите text-align: right; в родительском div.

Если вам не нужно поддерживать IE9 и ниже, вы можете использовать flexbox для решения этой проблемы: codepen

Также есть несколько ошибок с IE10 и 11 (flexbox поддержка), но они не присутствуют в этом примере

Вы можете вертикально выровнять <button> и <form>, обернув их в контейнер с помощью flex-direction: column. Порядок источников элементов будет порядком, в котором они отображаются сверху вниз, поэтому я их переупорядочил.

Затем вы можете горизонтально выровнять контейнер формы и кнопки с холстом, обернув их в контейнер с помощью flex-direction: row. Опять порядок источников элементов будет порядком, в котором они отображаются слева направо, поэтому я переупорядочил их.

Кроме того, для этого потребуется удалить все правила стиля position и float из кода, связанного в вопросе.

Здесь урезана версия HTML в кодедере, указанном выше.

<div id="mainContainer">
  <div>
    <canvas></canvas>
  </div>
  <div id="formContainer">
    <div id="addEventForm"> 
      <form></form>
    </div>
    <div id="button">
      <button></button>
    </div>
  </div>
</div>

И вот соответствующий CSS

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

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

Вы можете просто использовать padding-left: 60% (например), чтобы выровнять контент по правому краю и одновременно обернуть контент в адаптивный контейнер (в моем случае я использовал navbar), чтобы убедиться, что он работает во всех примерах.

Я знаю, что это старый пост, но не могли бы вы просто использовать <div id=xyz align="right"> для правильного.

Вы можете просто заменить правую слева, в центре и оправдать.

Работает на моем сайте:)