Duas divs lado a lado - exibição de fluido

222

Estou tentando colocar duas divs lado a lado e usando o CSS a seguir.

#left {
  float: left;
  width: 65%;
  overflow: hidden;
}

#right {
  overflow: hidden;
}

O HTML é simples, duas div esquerda e direita em uma div de wrapper.

<div id="wrapper">
  <div id="left">Left side div</div>
  <div id="right">Right side div</div>
</div>

Tentei várias vezes procurar uma maneira melhor no StackOverflow e em outros sites também, mas não consegui encontrar a ajuda exata.

Portanto, o código funciona bem à primeira vista. O problema é que a div esquerda recebe preenchimento / margem automaticamente à medida que aumenta a largura em (%). Portanto, com 65% de largura, a div esquerda está com algum preenchimento ou margem e não está perfeitamente alinhada com a div direita. Tentei preencher com a margem 0, mas sem sorte. Em segundo lugar, se eu ampliar a página, a div direita desliza abaixo da div esquerda, é como uma exibição não fluida.

Nota: desculpe, pesquisei bastante. Esta pergunta foi feita muitas vezes, mas essas respostas não estão me ajudando. Eu expliquei qual é o problema no meu caso.

Espero que haja uma correção para isso.

Obrigado.

EDIT: Desculpe, meu problema de HTML, havia dois divs "box" nos lados esquerdo e direito, eles tinham preenchimento em%, portanto, o lado esquerdo mostrou mais preenchimento por causa da maior largura. Desculpe, o CSS acima funciona perfeitamente, sua exibição fluida e fixa, Desculpe por fazer a pergunta errada ...

— Waleed
fonte

1

Havia duas divs de caixa? O que é uma caixa div? Esta questão não está clara.

— João Ktejik #

252

Experimente um sistema como este:

.container {
  width: 80%;
  height: 200px;
  background: aqua;
  margin: auto;
  padding: 10px;
}

.one {
  width: 15%;
  height: 200px;
  background: red;
  float: left;
}

.two {
  margin-left: 15%;
  height: 200px;
  background: black;
}

<section class="container">
  <div class="one"></div>
  <div class="two"></div>
</section>

Expandir snippet

Você só precisa flutuar uma div se usar a margem esquerda na outra igual à largura da primeira div. Isso funcionará independentemente do zoom e não terá problemas com subpixels.

— dezman
fonte

1

Ele não está ajudando, a coisa zoom é fixo agora, ele diz fixo, mas a div direita agora é deslizado para baixo e fixo nessa posição

— Waleed

Você provavelmente estragou alguma coisa, verificou seu código ou me disse o link para o jsFiddle e olhava mal para ele.

— Dez /

aww cara, me desculpe. As divs já foram corrigidas pelo CSS acima que eu dei, são apenas as divs "box" no lado esquerdo e direito, tinham preenchimento e margem em%, porque o div direito era curto, por isso, tinha preenchimento enqual e margens. Desculpe ...

— Waleed

Não deveria <section>ser um <div>lugar?

— jvriesem 18/03

218

Isso é fácil com um flexbox:

#wrapper {
  display: flex;
}

#left {
  flex: 0 0 65%;
}

#right {
  flex: 1;
}

<div id="wrapper">
  <div id="left">Left side div</div>
  <div id="right">Right side div</div>
</div>

Expandir snippet

— Christopher Moore
fonte

5

Bom, o flexbox é definitivamente o caminho a seguir #

— Julian Soro

4

Segundo este site, o flex deve funcionar em 94% dos navegadores. caniuse.com/#search=flex

— Adrian

8

@JoostS não é que 94% dos diferentes navegadores disponíveis (como ele sempre funciona no Chrome, Mozilla, IE etc etc), não que funcione 94% das vezes, independentemente do navegador?

— 24416 Joe

6

Atualmente, é de 97 +%. Basicamente, eu diria que, se você não precisar segmentar o IE8, vá com o flexbox, neste caso e em outros. As soluções Flexbox são quase sempre mais elegantes e fáceis de raciocinar.

— Alan Thomas

6

Se você já possui um site, nunca acesse o compartilhamento do navegador, veja seus próprios logs de tráfego. Na maioria dos meus sites, o IE8 representa apenas 0,01% do tráfego. No entanto ... vi sites específicos em que a audiência é de usuários de corporações, governos ou organizações sem fins lucrativos que usam muito software legado, e o uso antigo do navegador IE pode ser surpreendentemente alto.

— precisa saber é o seguinte

95

Usando este CSS para o meu site atual. Funciona perfeito!

#sides{
margin:0;
}
#left{
float:left;
width:75%;
overflow:hidden;
}
#right{
float:left;
width:25%;
overflow:hidden;
}

— Waleed
fonte

49

Fico feliz em saber que você encontrou e aceitou sua própria resposta, mas o que é #sides? Não está na sua pergunta original.

— JMD

2

Usar float: left no filho (#right) matará a altura da div pai (#wrapper). Portanto, esta solução depende do requisito. Melhor dar flutuador em apenas uma criança (# deixou no seu caso).

— Rahul Gandhi

8

Aqui está a minha resposta para aqueles que pesquisam no Google:

CSS:

.column {
    float: left;
    width: 50%;
}

/* Clear floats after the columns */
.container:after {
    content: "";
    display: table;
    clear: both;
}

Aqui está o HTML:

<div class="container">
    <div class="column"></div>
    <div class="column"></div>
</div>

— Malachi Bazar
fonte

3

Faça os dois divs assim. Isso alinhará as duas divs lado a lado.

.my-class {
  display : inline-flex;
}

— Coen Damen
fonte

1

#sides{
margin:0;
}
#left{
float:left;
width:75%;
overflow:hidden;
}
#right{
float:left;
width:25%;
overflow:hidden;
}

<h1 id="left">Left Side</h1>
<h1 id="right">Right Side</h1>
<!-- It Works!-->

Expandir snippet

— CoolPerson879
fonte

Qual é o motivo do estouro: oculto? Não parece ser necessário ...

— Honza 03/06

0

   <div style="height:50rem; width:100%; margin: auto;">
    <div style="height:50rem; width:20%; margin-left:4%; margin- 
    right:0%; float:left; background-color: black;">

    </div>
    <div style="height:50rem; width:20%; margin-left:4%; margin- 
    right:0%; float:left;  background-color: black;">

    </div>
    <div style="height:50rem; width:20%; margin-left:4%; margin- 
    right:0%; float:left;  background-color: black;">

    </div>
    <div style="height:50rem; width:20%; margin-left:4%; margin- 
    right:0%; float:left;  background-color: black;">

    </div>
   </div>

margem-direita não é necessária.

— Towsif Ahmed Labib
fonte