Colocando 3 div's Side by Side

Question

Quiero colocar 3 divs uno al lado del otro usando CSS. He revisado muchas publicaciones sobre SO, pero no estoy trabajando para mi proyecto.

#quotescointainer{ 
    width: 100%; 
    font-size: 12px; 
} 
#quotesleft{ 
    float:left; 
    width: 33%; 
    background-color: white; 
} 
#quotescenter{ 
    background-color:white; 
    width: 33%; 
} 
#quotesright{ 
    float:left; 
    width: 33%; 
} 

Lo anterior no coloca los div's en el lugar correcto. Parece que no puedo entender el error que estoy cometiendo.

Answer 1

Se podría float: lefttodos los interiores div s:

http://jsfiddle.net/W8dyy/

Debe corregir la ortografía de quotescointainer a quotescontainer.

#quotescointainer{ 
    width: 100%; 
    font-size: 12px; 
    overflow: hidden; /* contain floated elements */ 
    background: #ccc 
} 
#quotesleft { 
    float: left; 
    width: 33%; 
    background-color: #bbb; 
} 
#quotescenter { 
    float: left; 
    background-color: #eee; 
    width: 33%; 
} 
#quotesright{ 
    float: left; 
    width: 33%; 
    background-color: #bbb; 
} 

Answer 2

Hace poco hice esta misma pregunta.

Aquí hay un enlace:

Inline div elements

Aquí está mi respuesta aceptada:

conjunto de estilos CSS a la pantalla display: inline-block ;.

Esto permite que el elemento conserve su funcionalidad de bloque similar a , mientras que también permitiendo que se muestre en línea. Es una casa intermedia entre los dos.

(Pero tenga en cuenta que hay algunas problemas de compatibilidad con los antiguos versiones de IE)

Answer 3

Con el advenimiento de las redes CSS, esto puede lograrse mejor que en lugar de utilizar display: inline y float.

https://jsfiddle.net/dxec62vk/

También hay un buen apoyo para el navegador grid ahora: https://caniuse.com/#feat=css-grid