1

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

3
  • Se usar % em vez de px resolves esses problemas Commented 18/07/2014 às 18:00
  • Adicionei observações @CesarMiguel
    – Joao Paulo
    Commented 18/07/2014 às 18:02
  • @JoaoPaulo muito provavelmente você terá problema de resolução em telas não convencionais (smartphones e outros). O [Bootstrap](getbootstrap.com) pode ajudá-lo a resolver esse e outros problema futuros. Dependendo do que você está fazendo, vale a pena pensar em utilizá-lo.
    – anmaia
    Commented 18/07/2014 às 18:06

1 Resposta 1

5

Em primeiro lugar, você deve permitir que as duas divs ocupem a mesma linha. Para tal use o display: inline-block. Depois precisa remover o espaço entre as divs. Note o seguinte:

<div id="div1">Conteúdo 1</div>
<div id="div2">Conteúdo 2</div>

Existe uma quebra de linha e espaços entre </div> e <div>. Infelizmente eles farão diferença no layout. O processamento do HTML colapsa múltiplos espaços em um espaço só, mas ele não deixa de existir. Será inserido entre as duas divs o caractere " ". Alguns pixels de separação que vão ficar visíveis. Pode contornar assim:

<div id="div1">Conteúdo 1
</div><div id="div2">Conteúdo 2
</div>

Feio, mas funciona. Depois, aplique o width que quer na segunda div e na primeira use o seguinte:

width: calc(100% - 200px);

Ou seja, o tamanho total do contêiner menos o tamanho da segunda div. Note que o espaço ao redor do operador - é importante, não remova.

Exemplo final funcionando: http://jsfiddle.net/Ggzkb/

3
  • eu não entendi qual o problema da quebra de linha. Commented 18/07/2014 às 20:31
  • 1
    @FelipeStoker melhorei o texto Commented 19/07/2014 às 1:54
  • pra você ver como esse site e essencial na vida de quem esta começando, pergunta de 2014 me ajudando depois de 4 anos, obrigado @Guilherme
    – Vitor Hugo
    Commented 13/11/2018 às 11:06

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .