Как разместить элемент SVG под текстовым полем?

Question

Я пытаюсь сделать две вещи:

1. Сделать ввод текста занять все пространство в дел. Мой текущий подход - left: 0; right: 0;, но, видимо, он не работает.
2. Поместите SVG в относительное положение к контейнеру div таким образом, чтобы я мог перемещать его прямо под текстовой вставкой (я работаю над компонентом слайдера в SVG).

Вы можете увидеть его в this JsFiddle

Есть ключи для позиционирования? clear: both бесполезно отправлять SVG на следующую строку? Могу ли я получить относительное позиционирование из контейнера div элемент каким-то образом?

UPDATE:

Я нашел обходной путь для моего позиционирования вопроса (2). Использовать position: relative на контейнере div и position: absolute на обоих дочерних элементах (input и svg). См. updated JsFiddle.

Тем не менее вопрос (1) остается. Как сделать ввод текста заполнить весь контейнер div?

Answer 1

Попробуйте поставить SVG на следующей строке:

  .container { 
       width: 400px; 
       height: 45px; 
       background: gray; 
      } 

      .textfield { 
       clear: both; 
       float:left; 
       margin-right:100px; 
      } 

      .slider { 
       width: 200px; 
       height: 15px; 
       border: 1px solid #741; 

      } 

Answer 2

Re часть # 1. Почему бы вам просто не задать поле ввода для ввода того же размера, что и div?

.textfield { 
    width: 400px; 
    height: 45px; 
    clear: both; 
} 

http://jsfiddle.net/M8UEv/8/

Он также имеет эффект перемещения SVG под текстовым полем.