CSS lado a lado div anchos iguales iguales

Tengo un div principal que contendrá 2 o 3 divs secundarios. Quiero que los divs hijos tomen el mismo ancho automáticamente.

Gracias

No es imposible. Ni siquiera es particularmente difícil, con el uso de display: table .

Esta solución funcionará en los navegadores modernos. No funcionará en IE7.

http://jsfiddle.net/g4dGz/ (tres div s)
http://jsfiddle.net/g4dGz/1/ (dos div s)

CSS:

 #wrapper { display: table; table-layout: fixed; width:90%; height:100px; background-color:Gray; } #wrapper div { display: table-cell; height:100px; } 

HTML:

 
one one one one one one one one one one one one one one one one one one one one one
two two two two two two
three

en los navegadores modernos, puedes usar flexbox

ejemplo de tres divs

Ejemplo de dos divs

CSS:

 #wrapper { display: flex; width:90%; height:100px; background-color:Gray; } #wrapper div { flex-basis: 100%; } 

HTML:

 
one one one one one one one one one one one one one one one one one one one one one
two two two two two two

¿Has probado usar width:33% ?

Aquí hay una solución que funciona.

html:

 

css:

 #parent{ height: 200px; background: #f00; } #parent > div{ width: calc(100%/3); height: 100%; background: #fff; float: left; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; } #parent > div:nth-child(1){ border-right: 30px solid #f00; } #parent > div:nth-child(2){ border-right: 15px solid #f00; border-left: 15px solid #f00; } #parent > div:nth-child(3){ border-left: 30px solid #f00; } 
 .wrapper > div { width: 33.3%; } 

Esto no funciona en IE <= 6, por lo que sería mejor agregar algunas clases comunes a los elementos secundarios y crear una regla CSS para ello.