html - poner - posicionar div abajo

Cómo colocar div lado a lado

Question

Tengo un div envoltorio principal que se establece 100% de ancho. Dentro de eso me gustaría tener dos divs, uno que tiene un ancho fijo y el otro que llena el resto del espacio. ¿Cómo puedo flotar el segundo div para llenar el resto del espacio. Gracias por cualquier ayuda.

Answer 1

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

Simplemente defina el ancho del primer div, y luego asigne al segundo un valor de flex-grow que 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>

demo jsFiddle

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 (vea también Caniuse y MDN ). Una gran guía completa sobre cómo usar las cajas flexibles está disponible en CSS Tricks .

Answer 2

Dale a la primera división un flotador a la izquierda y fija con, la segunda div 100% de ancho una flotación a la izquierda. Eso debería hacer el truco. Si desea colocar elementos debajo de él, necesita una clara: tanto en el elemento que desea colocar a continuación

Answer 3

Hay muchas maneras de hacer lo que estás pidiendo:

1. Usando la propiedad float CSS :

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

2. Usando la propiedad de display CSS , que se puede usar para hacer que div s actúe como una 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.

Answer 4

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

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

JSFiddle

Answer 5

No sé mucho acerca de las estrategias de diseño de HTML y CSS, pero si está buscando algo simple y que se ajuste a la pantalla automáticamente (como yo lo soy), creo que la solución más sencilla es hacer que los divs se comporten como palabras en un párrafo. Intenta especificar display: 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 deba o no deba especificar el ancho de los DIV

Answer 6

Si no estás etiquetando IE6, entonces flota el segundo <div> y dale un margen igual a (o quizás un poco más grande que) el ancho fijo del primer <div> .

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 de espacio'' <div> pueda contener más contenido que el ''ancho fijo'' <div> .

No le des un fondo al ancho fijo; Si necesita verlas visiblemente como ''columnas'' diferentes, use el truco de columnas falsas.

Answer 7

<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 varios navegadores. Sin el margen izquierdo, se encontrará con problemas con el contenido que se extiende completamente hacia la izquierda si el contenido es más largo que la barra lateral.