Cómo colocar div uno al lado del otro [duplicado]

Tengo un div contenedor principal que está configurado al 100% del ancho. Dentro de eso me gustaría tener dos divs, uno de ancho fijo y el otro que llene el resto del espacio. ¿Cómo hago flotar el segundo div para llenar el resto del espacio? Gracias por cualquier ayuda.

Apr 14 '10 20:04 markt

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

Simplemente defina el ancho del primer div y luego déle al segundo un flex-growvalor 1que le permitirá 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>

Manifestación:

div {
    color: #fff;
    font-family: Tahoma, Verdana, Segoe, sans-serif;
    padding: 10px;
}
.container {
    background-color:#2E4272;
    display:flex;
}
.fixed {
    background-color:#4F628E;
    width: 200px;
}
.flex-item {
    background-color:#7887AB;
    flex-grow: 1;
}

<div class="container">
    <div class="fixed">Fixed width</div>
    <div class="flex-item">Dynamically sized content</div>
</div>

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

Jun 18 '2014 18:06 filoxo

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

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

Es posible que necesite o no especificar el ancho de los DIV

May 27 '2015 20:05 Guillermo Ruffino

Puede utilizar la cuadrícula CSS para lograr esto; esta es la versión completa 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 usando flotador 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 pongas tus estilos en línea en la vida real, extráelos en una hoja de estilo.

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>

Apr 14 '2010 13:04 Fenton