Div 100% ширина минус ширина изображения

Question

Я разрабатываю мобильный сайт html5.

http://jsfiddle.net/ko7o8kkd/

Что мне нужно сделать, что зеленая часть определяется ...

<div class="toplevelpadding searchbar"> 

... занимает столько же ширины, как он может, но значок поиска справа находится все еще на одной линии?

В принципе, он должен иметь ширину = 100% - (iconwidth + somepadding).

Как это достигается лучше всего? Он должен быть как можно более кросс-браузер.

Любая помощь приветствуется.

Answer 1

Если ширина значка и дополнения статична вы можете использовать метод известково из CSS3

Say значок = 50px и полное заполнение 20px;

/* Firefox */ 
    width: -moz-calc(100% - 70px); 
/* WebKit */ 
    width: -webkit-calc(100% - 70px); 
/* Opera */ 
    width: -o-calc(100% - 70px); 
/* Standard */ 
    width: calc(100% - 70px);