Прижать элемент вправо

[rgl]

Нужно в одной строке (ширина фиксирована) разместить два текстовых элемента и кнопку, причем текст прижать влево, а кнопку разместить как можно правее. Пусть вся строка - div, где text-align: left а у кнопки float: right

И вопрос - в каком порядке размещать элементы в коде? Вроде интуитивно хочется в том же порядке, что и на экране, т.е. текст, текст, кнопка. Но вижу что применяют другой порядок, кнопку в коде размещают вначале. Оба варианта вроде работают, есть ли какая-то причина предпочитать второй?

<style type="text/css">  div { text-align: left; width: 600px }  input[type=button] { float: right }</style><!-- первый вариант, в коде в том же порядке что и на экране --><div>  <span style="color:red">text1</span> <span style="color:green">text2</span>  <input type="button" value="button"></div><br><!-- второй вариант - кнопка в коде раньше текстовых элементов --><div>  <input type="button" value="button">  <span style="color:red">text1</span> <span style="color:green">text2</span></div>

http://jsfiddle.net/c6du2y3a/

Edited May 15, 2015 by rgl

[Great Rash]

У вас всё в порядке только до того момента пока текст не станет ниже кнопки, вот иллюстрация проблемы. именно поэтому плавающий элемент должен идти первым.