Panel dividido usando la propiedad de cambio de tamaño de CSS3

Question

He intentado hacer el cambio de tamaño del panel dividido utilizando la propiedad CSS3.

Aquí está el código:

<style> 

div.left, div.right {float: left; outline: solid 1px #ccc; 
resize: both; overflow: auto;} 

div.left {width: 20%} 

div.right {width: 80%} 

</style> 

<div class="left"> 
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
</div> 

<div class="right"> 
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
</div> 

El problema es que si yo cambio el tamaño de la div izquierda, la derecha div no se encoge y su ser empujado hasta el fondo. ¿Hay otras formas en que puedo hacer el panel dividido sin usar el javascript?

Digamos, si no se puede hacer usando CSS3 y realmente necesita usar el javascript, el javascript debe ser mínimo si puede.

Gracias.

Answer 1

No estoy seguro de por qué esperas que cambie el tamaño del otro elemento. ¿No parece haber ninguna relación entre ellos en tu marcado?

Suponiendo que usted está apuntando WebKit y desarrollo de Firefox instantáneas, esto debería hacer la mayor parte de lo que le interesa:

1. Crear un elemento de envoltura y la pusieron a display: box (usando prefijos proveedor correspondiente)
2. defina uno de los elementos que se fijará tamaño pero de tamaño variable, de lo contrario las cosas se ponen demasiado confuso para el navegador
3. Establecer que el otro sea box-flex: 1 (de nuevo con appropriate vendor prefixes)

Here's a working example, funciona mejor en Chrome que en Firefox: si necesita otros navegadores compatibles, necesitará una solución de JavaScript.

--edit:

Acabo de recibir un upvote en esta vieja respuesta, el viejo ejemplo no funciona con la nueva versión de FlexBox, por lo here's a new example. En los pasos anteriores, reemplace display: box con display: flex y box-flex: 1 con flex: 1 1 0;.