Como colocar div lado a lado

Eu tenho uma div principal do wrapper que está definida como 100% de largura. Dentro disso, eu gostaria de ter dois divs, um com largura fixa e outro que preenche o resto do espaço. Como faço para flutuar a segunda div para preencher o restante do espaço. Obrigado por qualquer ajuda.

Há muitas maneiras de fazer o que você está pedindo:

1. Usando a propriedade CSSfloat :

   <div style="width: 100%; overflow: hidden;">
       <div style="width: 600px; float: left;"> Left </div>
       <div style="margin-left: 620px;"> Right </div>
   </div>

2. Usando a propriedade CSSdisplay - que pode ser usada para fazer com que divaja como table:

   <div style="width: 100%; display: table;">
       <div style="display: table-row">
           <div style="width: 600px; display: table-cell;"> Left </div>
           <div style="display: table-cell;"> Right </div>
       </div>
   </div>

Existem mais métodos, mas esses dois são os mais populares.

O CSS3 introduziu caixas flexíveis (também conhecidas como flex box), que também podem atingir esse comportamento.

Simplesmente defina a largura da primeira div e, em seguida, dê à segunda um flex-growvalor 1que permita preencher a largura restante do pai.

.container{
    display: flex;
}
.fixed{
    width: 200px;
}
.flex-item{
    flex-grow: 1;
}

<div class="container">
  <div class="fixed"></div>
  <div class="flex-item"></div>
</div>

Demonstração do jsFiddle

Observe que as caixas flexíveis não são compatíveis com os navegadores antigos, mas são uma ótima opção para direcionar navegadores modernos (consulte também Caniuse e MDN ). Um ótimo guia abrangente sobre como usar caixas flexíveis está disponível em CSS Tricks .

Eu não sei muito sobre estratégias de design HTML e CSS, mas se você estiver procurando por algo simples e que caiba na tela automaticamente (como eu sou), acredito que a solução mais direta é fazer com que os divs se comportem como palavras em um parágrafo. Tente especificardisplay: inline-block

<div style="display: inline-block">
   Content in column A
</div>
<div style="display: inline-block">
   Content in column B
</div>

Você pode ou não precisar especificar a largura dos DIVs

Você pode usar a grade CSS para conseguir isso. Esta é a versão em mão longa para fins de ilustração:

div.container {
    display: grid;
    grid-template-columns: 220px 20px auto;
    grid-template-rows: auto;
}

div.left {
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: row1-start
    grid-row-end: 3;
    background-color: Aqua;
}

div.right {
    grid-column-start: 3;
    grid-column-end: 4;
    grid-row-start: 1;
    grid-row-end; 1;
    background-color: Silver;
}

div.below {
    grid-column-start: 1;
    grid-column-end: 4;
    grid-row-start: 2;
    grid-row-end; 2;
}

<div class="container">
    <div class="left">Left</div>
    <div class="right">Right</div>
    <div class="below">Below</div>
</div>

Ou o método mais tradicional usando float e margin.

Eu incluí uma cor de plano de fundo neste exemplo para ajudar a mostrar onde estão as coisas - e também o que fazer com o conteúdo abaixo da área flutuante.

Não coloque seus estilos alinhados na vida real, extraia-os em uma folha de estilos.

div.left {
    width: 200px;
    float: left;
    background-color: Aqua;
}

div.right {
    margin-left: 220px;
    background-color: Silver;
}

div.clear {
    clear: both;
}

    <div class="left"> Left </div>
    <div class="right"> Right </div>
    <div class="clear">Below</div>

<div style="width: 200px; float: left; background-color: Aqua;"> Left </div>
<div style="margin-left: 220px; background-color: Silver;"> Right </div>
<div style="clear: both;">Below</div>

Dê à primeira div um float à esquerda e fixe com, a segunda div 100% de largura e um float à esquerda. Isso deve fazer o truque. Se você deseja colocar itens abaixo dele, é necessário um espaço livre: ambos no item que você deseja colocar abaixo

<div class="container" style="width: 100%;">
    <div class="sidebar" style="width: 200px; float: left;">
        Sidebar
    </div>
    <div class="content" style="margin-left: 202px;">
        content 
    </div>
</div>

Isso será compatível com vários navegadores. Sem a margem esquerda, você terá problemas com o conteúdo que vai para a esquerda se o conteúdo for maior que a barra lateral.

Se você não estiver etiquetando o IE6, faça flutuar o segundo <div>e dê uma margem igual a (ou talvez um pouco maior que) a <div>largura fixa do primeiro .

HTML:

<div id="main-wrapper">
    <div id="fixed-width"> lorem ipsum </div>
    <div id="rest-of-space"> dolor sit amet </div>
</div>

CSS:

#main-wrapper {
    100%;
    background:red;
}
#fixed-width {
    width:100px;
    float:left
}
#rest-of-space {
    margin-left:101px;
        /* May have to increase depending on borders and margin of the fixd width div*/
    background:blue;
}

A margem é responsável pela possibilidade de que o 'restante espaço' <div>possa conter mais conteúdo do que a 'largura fixa' <div>.

Não dê um segundo plano à largura fixa; se você precisar visualizá-las visivelmente como 'colunas' diferentes, use o truque Colunas do falso .