Dividir Div en 2 columnas usando CSS

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!

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.

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>

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.

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.

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.

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

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

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

La mejor manera de dividir un div verticalmente:

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

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>

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.

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.

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.

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.