Expandible, ancho no fijo, diseño de cuatro columnas

Tengo una caja de 950px de ancho.

Dentro de este cuadro quiero tener hasta cuatro columnas potenciales.

Cuando se utilizan las cuatro columnas, cada columna debe ocupar aproximadamente el 25 % del espacio.

Sin embargo, cuando solo se usan tres, quiero que se expandan para ocupar el 33.33 % o cuando solo se usan dos columnas, quiero que cada una ocupe el 50 % y, si se usa una, quiero que ocupe el 100 %. del espacio

Debido a la naturaleza dinámica que estoy tratando de lograr, no puedo usar un diseño estándar de cuatro columnas de ancho fijo.

Bellow es lo que he logrado hasta ahora. Lo que da como resultado que las columnas se apilen una encima de la otra. Como dije, no puedo tener columnas de ancho fijo, ya que deben poder expandirse y colapsarse dependiendo de lo que haya en ellas.

.bottomboxwrapper   {
    width:950px;
    display:block;
    background-color:#6F0;
    overflow:hidden;
}
.bottomone  {
    float:left;
    background-color:#CCC;
    width:auto;
    display:inline-block;
    width:auto;

}
.bottomtwo  {
    float:left;
    width:auto;
    background-color:#999;  
    display:inline-block;
    width:auto;

}
.bottomthree    {
    float:left;
    background-color:#666;
    display:inline-block;
    width:auto;
}
.bottomfour {
    float:left;
    background-color:#C99;
    display:inline-block;
    width:auto;
}


<div class="bottomboxwrapper">
<div class="bottomone">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam hendrerit odio non diam varius quis mattis libero dignissim. Fusce auctor, turpis eget pretium euismod, tortor nulla eleifend nibh, sit amet blandit justo tellus non enim. Donec sodales ipsum et quam mattis quis tincidunt elit accumsan. Vestibulum dictum lorem ut purus congue vehicula. Quisque et dui non metus fringilla tempor. Fusce at nibh non lorem luctus ultricies sed at eros. Nullam cursus metus in leo tristique adipiscing. Proin volutpat orci eget massa blandit non sodales nulla rutrum. In id augue lacus. Quisque nec neque magna, a hendrerit augue. Suspendisse varius sapien sed neque accumsan volutpat. Sed arcu ligula, sagittis vel elementum vitae, scelerisque eget urna. Proin feugiat turpis at leo accumsan cursus. Nunc commodo, ligula vel posuere mollis, tortor purus blandit sem, id dignissim dui elit ut dolor. Cras tempus porttitor tortor, at hendrerit elit elementum eu. Nam mattis, lectus at bibendum tristique, tellus sapien gravida justo, at malesuada augue nibh nec sapien. 
</p>
</div>
<div class="bottomtwo">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam hendrerit odio non diam varius quis mattis libero dignissim. Fusce auctor, turpis eget pretium euismod, tortor nulla eleifend nibh, sit amet blandit justo tellus non enim. Donec sodales ipsum et quam mattis quis tincidunt elit accumsan. Vestibulum dictum lorem ut purus congue vehicula. Quisque et dui non metus fringilla tempor. Fusce at nibh non lorem luctus ultricies sed at eros. Nullam cursus metus in leo tristique adipiscing. Proin volutpat orci eget massa blandit non sodales nulla rutrum. In id augue lacus. Quisque nec neque magna, a hendrerit augue. Suspendisse varius sapien sed neque accumsan volutpat. Sed arcu ligula, sagittis vel elementum vitae, scelerisque eget urna. Proin feugiat turpis at leo accumsan cursus. Nunc commodo, ligula vel posuere mollis, tortor purus blandit sem, id dignissim dui elit ut dolor. Cras tempus porttitor tortor, at hendrerit elit elementum eu. Nam mattis, lectus at bibendum tristique, tellus sapien gravida justo, at malesuada augue nibh nec sapien. 
</p>
</div>
<div class="bottomthree">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam hendrerit odio non diam varius quis mattis libero dignissim. Fusce auctor, turpis eget pretium euismod, tortor nulla eleifend nibh, sit amet blandit justo tellus non enim. Donec sodales ipsum et quam mattis quis tincidunt elit accumsan. Vestibulum dictum lorem ut purus congue vehicula. Quisque et dui non metus fringilla tempor. Fusce at nibh non lorem luctus ultricies sed at eros. Nullam cursus metus in leo tristique adipiscing. Proin volutpat orci eget massa blandit non sodales nulla rutrum. In id augue lacus. Quisque nec neque magna, a hendrerit augue. Suspendisse varius sapien sed neque accumsan volutpat. Sed arcu ligula, sagittis vel elementum vitae, scelerisque eget urna. Proin feugiat turpis at leo accumsan cursus. Nunc commodo, ligula vel posuere mollis, tortor purus blandit sem, id dignissim dui elit ut dolor. Cras tempus porttitor tortor, at hendrerit elit elementum eu. Nam mattis, lectus at bibendum tristique, tellus sapien gravida justo, at malesuada augue nibh nec sapien. 
</p>
</div>
<div class="bottomfour">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam hendrerit odio non diam varius quis mattis libero dignissim. Fusce auctor, turpis eget pretium euismod, tortor nulla eleifend nibh, sit amet blandit justo tellus non enim. Donec sodales ipsum et quam mattis quis tincidunt elit accumsan. Vestibulum dictum lorem ut purus congue vehicula. Quisque et dui non metus fringilla tempor. Fusce at nibh non lorem luctus ultricies sed at eros. Nullam cursus metus in leo tristique adipiscing. Proin volutpat orci eget massa blandit non sodales nulla rutrum. In id augue lacus. Quisque nec neque magna, a hendrerit augue. Suspendisse varius sapien sed neque accumsan volutpat. Sed arcu ligula, sagittis vel elementum vitae, scelerisque eget urna. Proin feugiat turpis at leo accumsan cursus. Nunc commodo, ligula vel posuere mollis, tortor purus blandit sem, id dignissim dui elit ut dolor. Cras tempus porttitor tortor, at hendrerit elit elementum eu. Nam mattis, lectus at bibendum tristique, tellus sapien gravida justo, at malesuada augue nibh nec sapien.
 </p>
</div>
</div>

preguntado el 22 de mayo de 12 a las 21:05

Me interesaría MUCHO saber si puedes hacer esto solo con CSS... -

+1 Buena respuesta treinta puntos. ¿Qué pasa si uno de los divs tiene un ancho fijo? Estoy tratando de hacer algo similar a esto, aunque recientemente obtuve algunos votos negativos en una pregunta estúpida (lamentablemente) y mis privilegios para hacer preguntas fueron suspendidos, por lo que no puedo comenzar un nuevo hilo con detalles. El mío se basa en formularios y entradas que llenan el espacio restante. -

2 Respuestas

La forma más fácil de hacer esto con CSS es usar display: table/display: table-cell. Añadiendo table-layout: fixed asegura columnas de igual ancho.

Aquí hay un ejemplo con su HTML: http://jsfiddle.net/thirtydot/N4BUh/ (o a pantalla completa)

.bottomboxwrapper {
    display: table;
    table-layout: fixed;
    width: 100%;
}
.bottomboxwrapper > div {
    display: table-cell;
}

El único inconveniente de esta técnica es que display: table no es apoyado en IE7.

Hay un polyfill de JavaScript disponible que corrige IE7: http://tanalin.com/en/projects/display-table-htc/

contestado el 22 de mayo de 12 a las 22:05

¡Eso funciona muy bien! Gracias. ¿Hay alguna manera de que esto se expanda/contraiga automáticamente sin eliminar completamente el div. Entonces, si no hay contenido dentro del div, ¿no mostrará el espacio vacío? - Andrés Glover

Creo que lo máximo que podrías hacer con CSS solo sería anidar las columnas en algo como esto.

.one .col {
   width:100%;
}
.two .col {
   width:50%;
}
.three .col {
   width:33.33%;
}
.four .col {
   width:25%;
}

El inconveniente de eso es que tendría que saber de antemano cuántas columnas desea y llamar al nombre de la clase (o número) en el HTML así ... pero al menos solo cambiaría una sola clase, "uno", "dos", etc

    <div class="two">
       <div class="col">50% wide</div>
       <div class="col">50% wide</div>
    </div>

   <div class="three">
       <div class="col">33.33% wide</div>
       <div class="col">33.33% wide</div>
       <div class="col">33.33% wide</div>
    </div>

contestado el 22 de mayo de 12 a las 21:05

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.