Народ! Помогите, кто чем может - у меня уже голова кипит от перенапряжения.
Ситуация такая: в HTML-документе есть кусок, в котором несколько раз повторяется такая конструкция:
<div>
<span name="property">...</span>
<input type="text" name="value" value="" />
<img src="......" />
<img src="......" />
<img src="......" />
</div>
Все поля input имеют одинаковую ширину 300 пикселов. Все картинки являются квадратиками 16 на 16 пикселов. А вот что написано внутри span'ов - вещь сильно переменная. И, что значительно хуже, что находится слева от span'а - тоже вещь сильно переменная (запросто может иметь для разных span'ов разную ширину).
Нужно сделать так, чтобы все span'ы были сдвинуты до упора влево (каждый в своем div'е), а поля input и картинки (которые на самом деле будут кнопками) были сдвинуты до упора вправо (чтобы в совокупности от всех div'ов они выглядели ровной стройной колонной).
И неприятность заключается в том, что все это сделать нужно только силами CSS с минимальной модификацией HTML-тегов.
Одни только картинки прижать к правому краю получается, если на объемлющий div поставить style="position:relative", а на каждую из картинок в нем поставить style="position: absolute; right: ..." (и посчитать правильный отступ для каждой из картинок). Но при таком подходе input остается сдвинутым влево. Если дополнительно к тому на input тоже поставить style="position:absolute; right:..." - то результат оказывается непонятным: во-первых, input'ы от разных блоков накладываются друг на друга, и, во-вторых, нахрен летит верстка того, что находится слева.
Есть какие-нибудь идеи?