Estoy montando una galería de imágenes de manera que se muestre una columna de miniaturas a la izquierda (con enlaces), y a la derecha la imagen elegida a tamaño completo. Para ello pongo las miniaturas en una lista (<ul><li></li></ul>), y "floto" la lista a la izquierda mediante el mágico "float: left".
Pero entonces me encuentro con un problema: si la suma del ancho de la columna de las miniaturas y el ancho de la imagen a tamaño completo es superior al ancho de la página, no se me muestran las miniaturas al lado de la imagen, sino que se muestran primero las miniaturas, y más abajo la imagen a tamaño completo. Es decir, como no hay suficiente ancho para ambos elementos (la lista de miniaturas y la imagen a tamaño completo), el segundo (la imagen a tamaño completo) se desplaza a la siguiente línea. Cosa que no quiero que ocurra.
Podría solucionarlo utilizando siempre imágenes de las mismas dimensiones, pero no quiero hacerlo así, ya que hay imágenes panorámicas que merecen tener un ancho superior a la media. Además, tendría que calcular un tamaño "estándar" teniendo en cuenta una única resolución de pantalla, y centrarme en una resolución en concreto es algo que quiero evitar. También podría utilizar tablas, pero me da a mí que eso sería una chapuza.
Entonces, pregunto: ¿hay algún modo de "flotar" a la izquierda las imágenes en miniatura, y que aunque el ancho total de la suma de ambos elementos supere el ancho de la ventana, no me ponga el segundo elemento una línea más abajo?
