14

Gostaria de por dois blocos dentro de uma div de tamanho paralelo, um com tamanho fixo, e outro que coubesse exatamente no espaço restante.

Por exemplo :

div#container {
  width: 50%; /* este tamanho se altera */
  height: 100px;
}

#esquerdo {
  width: 100%
  height: 100px;
}
#direito {
  width: 40px;
  height: 100px;
}

quero os blocos #esquerdo e #direito lado a lado preenchendo o container. veja aqui : http://jsfiddle.net/nmqhyuz3/

O que devo fazer?

4 Respostas 4

12

Você pode fazer isso com Flexbox:

  1. Faça com que o #container possua leiaute flex:

    div#container {
        display: flex;
    
  2. O elemento da esquerda, cujo tamanho deve ocupar o máximo do espaço disponível, você estabelece que ele cresce livremente:

    #esquerdo {
        /*width: 100%*/
        flex-grow: 1;
    
  3. O da direita fica inalterado - o valor padrão para flex-grow é zero, de modo que ele não vai crescer além da largura determinada.

Exemplo no jsFiddle.

11
  • Esse "leiaute" me matou...
    – Jorge B.
    8/04/2015 às 8:47
  • @JorgeB Tem gente que acha feio (muita gente), mas eu gosto, e pelo menos em pt_BR é correto. layout também é correto, é claro, e "mata" bem menos gente... :P
    – mgibsonbr
    8/04/2015 às 9:00
  • 1
    eu estava boiando sem entender a palavra "leiaute" até o comentário do @Jorge B.. rsrsrsr 8/04/2015 às 10:25
  • 1
    @JorgeB. E se eu te contar que alguns políticos brasileiros queriam que mudássemos a grafia de "pizza" para "píteça"? Triste, mas verdadeiro. Ainda bem que não emplacou.
    – bfavaretto
    8/04/2015 às 14:54
  • 1
    @DanilloEder Adicione flex-wrap: wrap; no seu container, e crie novas divs nos pontos em que você quer que uma quebra ocorra; essas divs só precisam ter flex-basis: 100%, e mais nada. Exemplo.
    – mgibsonbr
    14/04/2015 às 13:55
5

É possível fazer isso com float, bastando alterar a ordem dos elementos no HTML... o direito deverá vir primeiro e o esquerdo depois:

/* ESTILOS IMPORTANTES PARA A RESPOSTA */
#esquerdo {
    height: 100px;
    overflow: hidden;
}
#direito {
    width: 50px;
    height: 100px;
    float: right;
}


/* ESTILOS AUXILIARES */
#container {
    border: #000000 solid 5px;
    margin-top: 10px;
    margin-bottom: 10px;
    width: 90%;
}
#esquerdo {
    background-color: red;
    overflow: hidden;
    border: 2px solid darkred;
    box-sizing: border-box;
}
#direito {
    background-color: yellow;
    border: 2px solid darkolivegreen;
    box-sizing: border-box;
}
<div id="container">
    <div id="direito">direito</div>
    <div id="esquerdo">esquerdo</div>
    container
</div>

1

Vou dar mais uma opção usando, usando display:grid e como grid-template-columns: auto 50px; eu deixo a coluna da esquerda com largura auto, 100% do espaço disponível, e a coluna da direita tem valor fixo de 50px.

inserir a descrição da imagem aqui

Código referente a imagem acima

#container {
    border: #000000 solid 5px;
    margin-top: 10px;
    margin-bottom: 10px;
    width: 90%;
    position: inherit;
    background-color: #eff2ff;
    display: grid;
    /* aqui eu defino que o Grid tem Duas colunas uma com width:auto e outra com 50px */
    grid-template-columns: auto 50px; 
}
#esquerdo {
    vertical-align: top;
    height: 100px;
    background-color: red;
    display: inline-block;
}
#direito {
    vertical-align: top;
    height: 100px;
    background-color: yellow;
    display: inline-block;
}

    
<div id="container">
    <div id="esquerdo"></div>
    <div id="direito"></div>
</div>

0

Eu consegui resolver isso Facilmente apenas colocando o Background-image dentro de uma Div defini o tamanho da mesma. Em seguida coloquei a propriedade no-repeat e adicionei um background-size de 100%.

div {
  background-image: url(./PizzaBackground.png);
  background-repeat: no-repeat;
  background-size: 100%;
  width: 1920px;
  height: 500px;
}

div { background-image: url(./PizzaBackground.png); background-repeat: no-repeat; background-size: 100%; width: 1920px; height: 500px; }

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 .