Div 100％宽度减去图像宽度

Question

我正在设计一个移动html5网站。

http://jsfiddle.net/ko7o8kkd/

我需要做什么才能确定......

定义的绿色部分

<div class="toplevelpadding searchbar">

...尽可能多的宽度，但右边的搜索图标仍然在同一条线上？

基本上，它应该有width = 100％ - （iconwidth + somepadding）。

这是如何实现最佳目标的？它应该尽可能地跨浏览器。

感谢任何帮助。

Answer 1

如果图标和填充的宽度是静态的，则可以使用css3的calc方法

假设icon = 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);