CSS duas divs um ao lado do outro

Eu quero colocar dois <div>s um ao lado do outro. O direito <div>tem cerca de 200 px; e a esquerda <div>deve preencher o resto da largura da tela? Como posso fazer isso?

Você pode usar o flexbox para organizar seus itens:

#parent {
  display: flex;
}
#narrow {
  width: 200px;
  background: lightblue;
  /* Just so it's visible */
}
#wide {
  flex: 1;
  /* Grow to rest of container */
  background: lightgreen;
  /* Just so it's visible */
}

<div id="parent">
  <div id="wide">Wide (rest of width)</div>
  <div id="narrow">Narrow (200px)</div>
</div>

Basicamente, isso é apenas raspar a superfície do flexbox. O Flexbox pode fazer coisas incríveis.

Para suporte mais antigo ao navegador, você pode usar as propriedades float CSS e a width para resolvê-lo.

#narrow {
  float: right;
  width: 200px;
  background: lightblue;
}
#wide {
  float: left;
  width: calc(100% - 200px);
  background: lightgreen;
}

<div id="parent">
  <div id="wide">Wide (rest of width)</div>
  <div id="narrow">Narrow (200px)</div>
</div>

Não sei se esse ainda é um problema atual ou não, mas encontrei o mesmo problema e usei a display: inline-block;tag CSS . Agrupando-os em uma div para que eles possam ser posicionados adequadamente.

<div>
    <div style="display: inline-block;">Content1</div>
    <div style="display: inline-block;">Content2</div>
</div>

Observe que o uso do atributo de estilo embutido foi usado apenas para a sucessão deste exemplo, é claro que eles foram movidos para um arquivo CSS externo.

Infelizmente, isso não é algo trivial para resolver no caso geral. O mais fácil seria adicionar uma propriedade no estilo css "float: right;" para sua div de 200px, no entanto, isso também faria com que o "principal" -div tivesse largura total e qualquer texto ali flutuaria em torno da borda de 200px-div, que geralmente parece estranha, dependendo do conteúdo (praticamente em todos os casos, exceto se for uma imagem flutuante).

EDIT: Como sugerido por Dom, o problema de empacotamento pode, obviamente, ser resolvido com uma margem. Eu tolo.

O método sugerido por @roe e @MohitNanda funciona, mas se a div correta estiver definida como float:right;, ela deverá vir primeiro na fonte HTML. Isso interrompe a ordem de leitura da esquerda para a direita, o que pode ser confuso se a página for exibida com os estilos desativados. Se for esse o caso, pode ser melhor usar uma div de wrapper e posicionamento absoluto:

<div id="wrap" style="position:relative;">
    <div id="left" style="margin-right:201px;border:1px solid red;">left</div>
    <div id="right" style="position:absolute;width:200px;right:0;top:0;border:1px solid blue;">right</div>
</div>

Demonstrado:

Edit: Hmm, interessante. A janela de visualização mostra as divs formatadas corretamente, mas o item de postagem renderizado não. Desculpe, então você terá que tentar por si mesmo.

Encontrei este problema hoje. Com base nas soluções acima, isso funcionou para mim:

<div style="width:100%;"> 
    <div style="float:left;">Content left div</div> 
    <div style="float:right;">Content right div</div> 
</div> 

Simplesmente faça com que a div principal abranja toda a largura e flutue as divs contidas nela.

ATUALIZAR

Se você precisar colocar elementos em uma linha, poderá usar o Flex Layout . Aqui você tem outro tutorial do Flex . É uma ótima ferramenta de CSS e, embora não seja 100% compatível, a cada dia seu suporte está melhorando. Isso funciona tão simples quanto:

HTML

<div class="container">
    <div class="contentA"></div>
    <div class="contentB"></div>
</div>

CSS

.container {
    display: flex;
    width: 100%;
    height: 200px;
}

.contentA {
    flex: 1;
}

.contentB {
    flex: 3;
}

E o que você obtém aqui é um contêiner com um tamanho total de 4 unidades, que compartilha o espaço com seus filhos em uma relação de 1/4 e 3/4.

Eu fiz um exemplo no CodePen que resolve seu problema. Espero que ajude.

http://codepen.io/timbergus/pen/aOoQLR?editors=110

MUITO VELHO

Talvez isso seja apenas um absurdo, mas você já tentou com uma mesa? Ele não usa CSS diretamente para posicionar as divs, mas funciona bem.

Você pode criar uma tabela 1x2 e colocar seu divsinterior e, em seguida, formatar a tabela com CSS para colocá-las como quiser:

<table>
  <tr>
    <td>
      <div></div>
    </td>
    <td>
      <div></div>
    </td>
  </tr>
</table>

Nota

Se você quiser evitar o uso da mesa, como disse antes, você pode usar float: left;e float: right;e na seguinte elemento, não se esqueça de adicionar um clear: left;, clear: right;ou clear: both;a fim de ter a posição limpa.

div1 {
    float: right;
} 
div2 {
    float: left;
}

Isso funcionará bem, desde que você defina clear: botho elemento que separa esse bloco de duas colunas.

Encontrei o mesmo problema e a versão do Mohits funciona. Se você deseja manter sua ordem esquerda-direita no html, tente isso. No meu caso, a div esquerda está ajustando o tamanho, a div direita permanece na largura 260px.

HTML

<div class="box">
<div class="left">Hello</div>
<div class="right">World</div>
</div>

CSS

.box {
    height: 200px;
    padding-right: 260px;
}    

.box .left {
    float: left;
    height: 200px;
    width: 100%;
}

.box .right {
    height: 200px;
    width: 260px;
    margin-right: -260px;
}

O truque é usar um preenchimento à direita na caixa principal, mas use esse espaço novamente colocando a caixa à direita novamente com a margem direita.

Eu uso uma mistura de float e overflow-x: hidden. Código mínimo, sempre funciona.

https://jsfiddle.net/9934sc4d/4/ - MAIS você não precisa limpar o seu carro alegórico!

.left-half{
    width:200px;
    float:left;
}
.right-half{
    overflow-x:hidden;
}

Como todos apontaram, você fará isso definindo um float:right; conteúdo no RHS e uma margem negativa no LHS.

No entanto ... se você não usar um float: left; no LHS (como o Mohit), obterá um efeito de passo porque a div do LHS ainda consumirá o espaço da margem no layout.

No entanto .. o flutuador LHS reduz o conteúdo do encapsulamento, portanto, você precisará inserir um nó filho de largura definida, se isso não for aceitável; nesse ponto, você também pode ter definido a largura no pai.

No entanto ... como David aponta, você pode alterar a ordem de leitura da marcação para evitar o requisito de flutuação do LHS, mas isso tem problemas de legibilidade e possivelmente de acessibilidade.

No entanto .. esse problema pode ser resolvido com carros alegóricos, com alguma marcação adicional

(ressalva: não aprovo a div .clearing nesse exemplo, veja aqui para detalhes)

Considerando tudo, acho que a maioria de nós gostaria que houvesse uma largura não gananciosa: permanecendo no CSS3 ...

Esta não será a resposta para todos, pois não é suportada no IE7-, mas você pode usá-lo e, em seguida, usar uma resposta alternativa para o IE7-. É display: table, display: table-row e display: table-cell. Observe que isso não está usando tabelas para layout, mas denomina divs para que as coisas se alinhem perfeitamente sem todo o aborrecimento de cima. O Mine é um aplicativo html5, por isso funciona muito bem.

Este artigo mostra um exemplo: http://www.sitepoint.com/table-based-layout-is-the-next-big-thing/

Aqui está a aparência da sua folha de estilo:

 .container {
    display: table;
    width:100%;
 }

 .left-column {
    display: table-cell;
 }

 .right-column {
    display: table-cell;
    width: 200px;
 }

Parafraseando um dos meus sites que faz algo semelhante:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <style TYPE="text/css"><!--

.section {
    _float: right; 
    margin-right: 210px;
    _margin-right: 10px;
    _width: expression( (document.body.clientWidth - 250) + "px");
}

.navbar {
    margin: 10px 0;
    float: right;
    width: 200px;
    padding: 9pt 0;
}

  --></style>
 </head>
 <body>
  <div class="navbar">
  This will take up the right hand side
  </div>
  <div class="section">
  This will fill go to the left of the "navbar" div
  </div>
 </body>
</html>

basta usar um z-index e tudo ficará bem. certifique-se de ter as posições marcadas como fixas ou absolutas. então nada se moverá como em uma tag de flutuação.