Cómo empujar contenido debajo de un div desplegable

Hola a todos, ando atascado con un pequeño problema, a ver si me podéis echar una mano.

Tengo una serie de <li> colocados en una especie de rejilla. Cada uno contiene, a su vez, un <div> que se despliega cuando hacemos click sobre dicho <li>. El problema que tengo es que el contenido me lo está mostrando encima del resto de <li> que tengo en la segunda fila y me gustaría que los empujara hacia abajo para colocarlos debajo del contenido que se ha desplegado. Necesito que el contenido que se despliegue ocupe el 100% de ancho de la ventana y por eso le he puesto la propiedad position:absolute y creo que por esto no me desplaza el resto de <divs>. No se muy bien si lo puedo solucionar con CSS o tengo que hacer algo en el JS.

Aquí podéis ver un ejemplo de lo que tengo

Expand div - JSFiddle

Si pincháis en cualquiera de los <li> de la primera fila, vers que se despliega el contenido correspondiente pero lo coloca encima de los <li> de la segunda fila en vez de empujarlos.

¿Se os ocurre que puedo estar haciendo mal?

Muchas gracias a todos, como siempre.

Un saludo

Pd. perdonad que no se que he tocado, pero los caracteres especiales los muestra un poco raros

Añádele esta línea a tu función click: $(this).parent().css('margin-bottom','500px'); , quítale el float:left a tus li.grid y añadeles un margin-left: -4px :encouragement:

Gracias por la ayuda Denzel, es muy buena idea.

El problema es que el tamaño del div que se despliega tiene ahora mismo un tamaño de 500px que he puesto a modo de prueba pero el tamaño variará dependiendo del contenido. Debo hacer algunos ajustes para que termine de funcionar como busco, pero te agradezco mucho la ayuda.

Un saludo