Supondo que tenho essa estrutura:
<div style="width:1000px">
<div id="div1" style=""></div>
<div id="div2" style="width:300px"></div>
</div>
Como fazer com que a div1 ocupe exatamente o espaço restante (700px) ?
De preferência levando em consideração já possiveis margens da div1 e div2.
A principio gostaria de fazer isso com CSS apenas, mas se não houver solução pode ser via javascript/jquery.
OBS: Não posso adicionar elementos html extras. A div2 possui width fixa.
OBS2: O cenário real é uma celula de Tabela. Nessa celula tenho o campo input que seria a "div1" no meu exemplo. E uma pequena imagem de lupa ao lado, que seria a div2 com tamanho fixo. Quero que esses dois elementos se encaixem para ocupar toda o espaço da celula