Cómo colocar div lado a lado

Tengo un div de contenedor principal que se establece al 100% de ancho. Dentro de eso, me gustaría tener dos divisiones, una de ancho fijo y la otra que ocupa el resto del espacio. ¿Cómo floto el segundo div para llenar el resto del espacio? Gracias por cualquier ayuda.

Hay muchas formas de hacer lo que está pidiendo:

1. Usando la propiedad CSSfloat :

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

2. Uso de la propiedad CSSdisplay , que se puede utilizar para hacer que divs actúe como un 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>

Hay más métodos, pero esos dos son los más populares.

CSS3 introdujo cajas flexibles (también conocido como caja flexible) que también pueden lograr este comportamiento.

Simplemente defina el ancho del primer div y luego asigne al segundo un flex-growvalor 1que le permita llenar el ancho restante del padre.

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

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

jsFiddle demo

Tenga en cuenta que los cuadros flexibles no son compatibles con los navegadores antiguos, pero es una excelente opción para apuntar a los navegadores modernos (consulte también Caniuse y MDN ). Una gran guía completa sobre cómo usar las cajas flexibles está disponible en CSS Tricks .

No sé mucho acerca de las estrategias de diseño de HTML y CSS, pero si está buscando algo simple y que se ajuste automáticamente a la pantalla (como soy), creo que la solución más directa es hacer que los divs se comporten como palabras en un párrafo. Intenta especificardisplay: inline-block

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

Puede que necesite o no especificar el ancho de los DIV

Puede usar la cuadrícula CSS para lograr esto, esta es la versión de mano larga con fines ilustrativos:

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>

O el método más tradicional que utiliza flotante y margen.

He incluido un color de fondo en este ejemplo para ayudar a mostrar dónde están las cosas, y también qué hacer con el contenido debajo del área flotante.

No ponga sus estilos en línea en la vida real, extráigalos en una hoja 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>

Dale al primer div un flotador hacia la izquierda y fija con, el segundo div 100% de ancho un flotador hacia la izquierda Eso debería hacer el truco. Si desea colocar elementos debajo de él, necesita un claro: ambos en el elemento que desea colocar debajo

<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>

Esto será compatible con el navegador cruzado. Sin el margen izquierdo, se encontrará con problemas con el contenido que se ejecuta completamente hacia la izquierda si su contenido es más largo que su barra lateral.

Si no está tagetizando IE6, entonces flote el segundo <div>y dele un margen igual (o tal vez un poco más grande) al <div>ancho fijo del primero .

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;
}

El margen explica la posibilidad de que el 'resto del espacio' <div>pueda contener más contenido que el 'ancho fijo' <div>.

No le dé al ancho fijo un fondo; si necesita verlos visiblemente como 'columnas' diferentes, use el truco Faux Columns .