Dividi div in 2 colonne usando CSS

Ho tentato di dividere un div in due colonne utilizzando CSS, ma non sono ancora riuscito a farlo funzionare. La mia struttura di base è la seguente:

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

Se provo a far fluttuare i div destro e sinistro nelle rispettive posizioni (destro e sinistro), sembra ignorare il colore di sfondo del div del contenuto. E altro codice che ho provato da vari siti Web non sembra essere in grado di tradurre nella mia struttura.

Grazie per qualsiasi aiuto!

Quando fai fluttuare questi due div, il div del contenuto si comprime a zero altezza. Basta aggiungere

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

dopo il div #right ma all'interno del div del contenuto. Ciò costringerà il div di contenuto a circondare i due div interni e mobili.

Questo funziona bene per me. Ho diviso lo schermo in due metà: 20% e 80%:

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

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

Un altro modo per farlo è aggiungere overflow:hidden;all'elemento genitore degli elementi float.

overflow: hidden farà crescere l'elemento per adattarsi agli elementi flottati.

In questo modo, tutto può essere fatto in css invece di aggiungere un altro elemento html.

Il modo più flessibile per farlo:

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

Funziona esattamente come aggiungere l'elemento a #content:

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

ma senza effettivamente aggiungere un elemento. :: after è chiamato pseudo elemento. L'unico motivo per cui è meglio che aggiungere overflow:hidden;a #content è che puoi avere elementi secondari posizionati in modo assoluto che eccedono ed essere ancora visibili. Inoltre permetterà che le ombre della scatola siano ancora visibili.

Nessuna delle risposte fornite risponde alla domanda originale.

La domanda è come separare un div in 2 colonne usando css.

Tutte le risposte precedenti incorporano effettivamente 2 div in un singolo div per simulare 2 colonne. Questa è una cattiva idea perché non sarai in grado di far scorrere il contenuto nelle 2 colonne in alcun modo dinamico.

Quindi, invece di quanto sopra, usa un singolo div definito per contenere 2 colonne usando CSS come segue ...

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

assegna quanto sopra come classe a un div e in realtà scorrerà il suo contenuto nelle 2 colonne. Puoi andare oltre e definire anche gli spazi tra i margini. A seconda del contenuto del div, potrebbe essere necessario modificare i valori di interruzione di parola in modo che il contenuto non venga tagliato tra le colonne.

Per qualsiasi motivo non mi sono mai piaciuti gli approcci di compensazione, mi affido a float e larghezze percentuali per cose come questa.

Ecco qualcosa che funziona in casi semplici:

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

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

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

Se inserisci dei contenuti vedrai che funziona:

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

Puoi vederlo qui: http://cssdesk.com/d64uy

Crea div per i bambini inline-blocke si posizioneranno fianco a fianco:

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

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

Vedi Demo

So che questo post è vecchio, ma se qualcuno di voi sta ancora cercando una soluzione più semplice.

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

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

Il modo migliore per dividere un div verticalmente -

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

Puoi utilizzare flexbox per controllare il layout del tuo 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>

I galleggianti non influenzano il flusso. Quello che tendo a fare è aggiungere un file

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

alla fine del 'wrapping div' (in questo caso il contenuto). Posso giustificarlo su base semantica dicendo che potrebbe essere necessario un paragrafo del genere. Un altro approccio consiste nell'usare 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;
}
/*  */

Il trucco con i commenti è per la compatibilità cross-browser.

La risposta migliore qui è Domanda 211383

In questi giorni, qualsiasi persona che si rispetti dovrebbe utilizzare l'approccio dichiarato "micro-clearfix" di clearing float.

1. Rendi la dimensione del carattere uguale a zero nel DIV genitore.

2. Imposta la larghezza% per ciascuno dei DIV figlio.

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

* In Safari potrebbe essere necessario impostare il 49% per farlo funzionare.

Dividere una divisione in due colonne è molto semplice, basta specificare meglio la larghezza della colonna se la metti (come width: 50%) e impostare float: left per colonna sinistra e float: right per colonna destra.