Publicado em 6 de set.

Duas divs lado a lado com uma delas responsiva

#desenvolvimento-frontend #div lado a lado #div responsivas

Olá, estou com um layout onde há duas div uma ao lado da outra, uma delas ficará a direita com width fixo de 200px e quero deixa a da esquerda sendo responsiva, porem não sei como fazer, alguem pode me ajudar?

Discussão (5)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

luiz14· 6 de set.

Para deixar responsivo, você pode usar no lugar de px (pixels), a porcentagem (%). Por exemplo:

div{

width: 20%;
}

	 

	E com o @media você pode especificar melhor em qual tamanho de tela você quer que isso aconteça. Por exemplo:

@media(max-width: 550px){
div{

        width: 100%;
    }

	 

	Aqui a largura vai ficar com 100% até a tela chegar a determinada largura que está no "max-width".

marsolim· 6 de set.

pra ficar lado a lado eu prefiro span com display:inline-block no lugar de div. span ficam naturalmente lado a lado

Alvaro Pacífico Serpa· 6 de set.

39 minutos atrás, marsolim disse:

pra ficar lado a lado eu prefiro span com display:inline-block no lugar de div. span ficam naturalmente lado a lado

Tipo quando eu abro em tela cheia fica certinho, porem quando diminuo o navegador a div responsiva acaba indo para baixo da div da direita, tentei colocar spam e não deu tbm.

cesarhtc· 21 de set.

Alvaro estou começando no html estou com esse problema, como seria?

Obrigado

#SPAN{ display:inline-block}

<div id="contents">
   <p>Processo de Compras</p><p id="formata-campo">44101000163201603</p>
  
</div>
<div id="contents">     
            <p>Tipo de Contrato:</p><p id="formata-campo">Cronograma</p>
    
</div>

Pita· 21 de set.

Tenta algo +/- assim

talvez precise de algum ajuste de alinhamento, mas acho que é um caminho

<style>
 .divResp{
 margin-right: 210px;
 border:solid red 1px;
}

.divFixa{
 width: 200px;
 border:solid blue 1px;
 position:absolute;
 right:0px;
 top:0px;
}
</style>

<div class="divResp">DIV1</div>
<div class="divFixa">DIV2</div>