divs dinámicamente como celdas en tablas de 1 ó 2 columnas

[caerolus]

Hola a todos,

estoy diseñando la página de resultados de un buscador. Digamos que cada resultado aparece en un div.item de 400x100, todos ellos dentro de un div#resultados contenedor de 400 de ancho:

Código HTML:

<style>
#resultados{
	width:400px;
	padding:0px;
	margin:0px;
	border:1px solid blue;
}
.item{
	width:400px;
	height:100px;
	padding:0px;
	margin:0px;
	border:1px solid red;
}
</style>
<div id="resultados">
<div class="item">resultado 1</div>
<div class="item">resultado 2</div>
<div class="item">resultado 3</div>
<div class="item">resultado 4</div>
<div class="item">resultado 5</div>
</div> 

Hasta aquí todo bien. El problema está en que, sin recargar la página, he de poder mostrar los resultados en 2 columnas, de forma que #resultados tenga un ancho de 800. Algo así:

Código:

resultado 1    resultado 2
resultado 3    resultado 4
resultado 5

La solución que pensé fue agrupar los .item de dos en dos en otro div.grupo, y hacer que #resultados cambiase a display:table.
.grupo podría tener display:table-row-group para el caso de una columna, y display:table-row para el caso de dos columnas.
.item tendría display:table-row para el caso de una columna, y display:table-cell para el caso de dos columnas.
Probé esto, y en Firefox y Chrome parece funcionar, pero, para la sorpresa... IE no soporta display:table-xx

Así que no tengo muy claro cómo hacer esto. El concepto es simplemente hacer que los .item salgan unos detrás de otros. Cuando el ancho del contenedor es 400 sólo caben unos debajo de otros, cuando es de 800 caben dos "en una fila".

Alguien puede ayudarme? Muchas gracias

[kseso?]

¿y cómo cambias la anchura de #resultados de 400px a 800px?
No lo tengo claro, así que esto posiblemente no te sirva:

#resultados{
overflow: hidden /* o 'auto'*/;
...
}

.item{
float: left
width:398px;
height:100px;
padding:0px;
margin:0px;
border:1px solid red;
}

[caerolus]

muchas gracias

Pensaba cambiar el ancho simplemente con javascript, en el evento onclick de un botón. O bien cambiar el ancho directamente o cambiar de una clase con 400 a otra clase con 800. No lo conté por no liar

Lo que me has dado funciona perfectamente. No sabía que overflow:hidden tuviese ese efecto para estas cosas, sólo lo usaba para no expandir divs cuando el texto fuera demasiado largo.

[kseso?]

No, Caerolus, el overflow está colocado sólo para que #resultados crezca (en la vertical en este caso) a la par que sus contenidos (que están flotados). Lo que hace posicionarse 2 a 2 en una anchura de 400px es el float de .item.

Un saludo

[caerolus]

Sí me refería a que cuando se especifica altura, overflow:hidden oculta los hijos que se salgan, pero cuando no se especifica altura expande el contenedor todo lo necesario. Eso es lo que no sabía, y me viene muy bien saberlo