Dividir Div en 2 columnas usando CSS


90

He intentado dividir un div en dos columnas usando CSS, pero aún no he logrado que funcione. Mi estructura básica es la siguiente:

<div id="content">
  <div id="left">
     <div id="object1"></div>
     <div id="object2"></div>
  </div>

  <div id="right">
     <div id="object3"></div>
     <div id="object4"></div>
  </div>
</div>

Si intento hacer flotar los divs derecho e izquierdo a sus respectivas posiciones (derecha e izquierda), parece ignorar el color de fondo del div de contenido. Y otro código que he probado en varios sitios web no parece poder traducirse en mi estructura.

¡Gracias por cualquier ayuda!


2
Hay tantas soluciones, puede ver esto: stackoverflow.com/questions/211383/…
enmaai

Respuestas:


60

Cuando flotas esos dos divs, el div de contenido se colapsa a la altura cero. Solo agrega

<br style="clear:both;"/>

después del div #right pero dentro del div de contenido. Eso obligará al div de contenido a rodear los dos divs flotantes internos.


17
Es lamentable que esto haya sido votado tantas veces. Realmente debe evitar el marcado extraño, especialmente considerando que existen otros remedios viables y ampliamente utilizados.
Jbird

91

Esto funciona bien para mi. He dividido la pantalla en dos mitades: 20% y 80%:

<div style="width: 20%; float:left">
   #left content in here
</div>

<div style="width: 80%; float:right">
   #right content in there
</div>

4
Si esto es todo lo que hace, el padre de estos elementos no tendrá altura.
tybro0103

Fácil y eficaz. ¡Gracias!
Alexis Gamarra

47

Otra forma de hacer esto es agregar overflow:hidden;al elemento padre de los elementos flotantes.

overflow: hidden hará que el elemento crezca para encajar en elementos flotantes.

De esta forma, todo se puede hacer en css en lugar de agregar otro elemento html.


1
Animo a los lectores a que también revisen mi otra respuesta. Creo que en realidad es mejor que este.
tybro0103

1
una nota más: a overflow:auto;veces puede ser una mejor opción
tybro0103

Este es definitivamente un medio eficaz. Sin embargo, vale la pena mencionar que esto puede crear algunos desafíos de diseño obvios. Por ejemplo, si quiero que el desbordamiento de mi elemento padre sea visible.
Jbird

16

La forma más flexible de hacer esto:

#content::after {
  display:block;
  content:"";
  clear:both;
}

Esto actúa exactamente de la misma manera que agregar el elemento a #content:

<br style="clear:both;"/>

pero sin agregar un elemento. :: after se denomina pseudoelemento. La única razón por la que esto es mejor que agregar overflow:hidden;a #content es que puede tener un desbordamiento absoluto de elementos secundarios y seguir siendo visibles. También permitirá que las sombras de caja sigan siendo visibles.


También es una gran solución, pero vale la pena mencionar aquí que esto no funciona en IE8. Realmente me duele ser el que dice eso y me disculpo por ser "ese tipo".
Jbird

@Jbird intente #content:after(solo dos puntos en lugar de dos) ... Si recuerdo correctamente, es más apropiado usar dos dos puntos para pseudo elementos, pero los IE más antiguos solo lo reconocen si tiene uno. ... o algo así, ha pasado bastante tiempo desde que me ocupé de ese problema.
tybro0103

13

Ninguna de las respuestas dadas responde a la pregunta original.

La pregunta es cómo separar un div en 2 columnas usando css.

Todas las respuestas anteriores en realidad incrustan 2 div en un solo div para simular 2 columnas. Esta es una mala idea porque no podrá hacer fluir el contenido en las 2 columnas de forma dinámica.

Entonces, en lugar de lo anterior, use un solo div que esté definido para contener 2 columnas usando CSS de la siguiente manera ...

.two-column-div {
 column-count: 2;
}

asigne lo anterior como una clase a un div, y realmente fluirá su contenido en las 2 columnas. También puede ir más allá y definir espacios entre márgenes. Dependiendo del contenido del div, es posible que deba alterar los valores de separación de palabras para que su contenido no se corte entre las columnas.


9

Por alguna razón, nunca me han gustado los enfoques de limpieza, confío en flotadores y anchos porcentuales para cosas como esta.

Aquí hay algo que funciona en casos simples:

#content { 
  overflow:auto; 
  width: 600px; 
  background: gray; 
} 

#left, #right { 
  width: 40%; 
  margin:5px; 
  padding: 1em; 
  background: white; 
} 

#left  { float:left;  }
#right { float:right; } 

Si pones algo de contenido, verás que funciona:

<div id="content">
  <div id="left">
     <div id="object1">some stuff</div>
     <div id="object2">some more stuff</div>
  </div>

  <div id="right">
     <div id="object3">unas cosas</div>
     <div id="object4">mas cosas para ti</div>
  </div>
</div>

Puedes verlo aquí: http://cssdesk.com/d64uy


8

Haga divs para niños inline-blocky se colocarán uno al lado del otro:

#content {
   width: 500px;
   height: 500px;
}

#left, #right {
    display: inline-block;
    width: 45%;
    height: 100%;
}

Ver demostración


También prefiero este método al flotador. A veces es necesario establecer un: vertical-align: top; (o en la parte inferior, etc.) en los elementos izquierdo y derecho si no son del mismo tamaño.
james

4

Sé que esta publicación es antigua, pero si alguno de ustedes todavía está buscando una solución más simple.

#container .left,
#container .right {
    display: inline-block;
}

#container .left {
    width: 20%;
    float: left;
}
#container .right {
    width: 80%;
    float: right;
}

3

La mejor manera de dividir un div verticalmente:

#parent {
    margin: 0;
    width: 100%;
}
.left {
    float: left;
    width: 60%;
}
.right {
    overflow: hidden;
    width: 40%;
}

3

Puede usar flexbox para controlar el diseño de su elemento div:

* { box-sizing: border-box; }

#content {
  background-color: rgba(210, 210, 210, 0.5);
  border: 1px solid #000;
  padding: 0.5rem;
  display: flex;
}

#left,
#right {
  background-color: rgba(10, 10, 10, 0.5);
  border: 1px solid #fff;
  padding: 0.5rem;
  flex-grow: 1;
  color: #fff;
}
<div id="content">
  <div id="left">
     <div id="object1">lorem ipsum</div>
     <div id="object2">dolor site amet</div>
  </div>

  <div id="right">
     <div id="object3">lorem ipsum</div>
     <div id="object4">dolor site amet</div>
  </div>
</div>


1
De un trillón de intentos similares, encuentro que esto ha funcionado (hasta ahora) The Best. Todo lo demás que encontré (y probé) permite que el contenido se desborde . Muchas gracias.
user12379095

1

Los flotadores no afectan el flujo. Lo que suelo hacer es agregar un

<p class="extro" style="clear: both">possibly some content</p>

al final del 'envoltorio div' (en este caso contenido). Puedo justificar esto sobre una base semántica diciendo que tal párrafo podría ser necesario. Otro enfoque es utilizar un CSS clearfix:

#content:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

#content {
  display: inline-block;
}
/*  \*/
* html #content {
  height: 1%;
}

#content {
  display: block;
}
/*  */

El truco con los comentarios es la compatibilidad entre navegadores.


0

Esto se responde mejor aquí Pregunta 211383

En estos días, cualquier persona que se precie debe utilizar el enfoque de "micro-clearfix" establecido de los flotadores de limpieza.


0
  1. Haga que el tamaño de fuente sea igual a cero en el DIV principal.
  2. Establezca el% de ancho para cada uno de los DIV secundarios.

    #content {
        font-size: 0;
    }
    
    #content > div {
        font-size: 16px;
        width: 50%;
    }
    

* En Safari, es posible que deba configurar 49% para que funcione.


Si bien este fragmento de código puede resolver la pregunta, incluir una explicación realmente ayuda a mejorar la calidad de su publicación. Recuerde que está respondiendo a la pregunta para los lectores en el futuro, y es posible que esas personas no conozcan los motivos de su sugerencia de código.
msrd0

0

Dividir una división en dos columnas es muy fácil, solo especifique mejor el ancho de su columna si coloca esto (como ancho: 50%) y establece el flotador: izquierda para la columna izquierda y flotante: derecho para la columna derecha.


Agregue más información con etiquetas relevantes.
Aman Garg

Espero que este código te ayude a comprender esto de una mejor manera; @AmanGarg CSS: #column { overflow:auto; width: 100%; } #column50pleft, #column50pright{ width: 49%; margin:2px; padding: 0.5%; background: white; } #column50pleft { float:left; } #column50pright { float:right; } HTML: <div id="column"> <div id="column50pleft"> </div> <div id="column50pright"> </div> </div>
Rashid Jorvee
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.