Tengo 2 div
s que ocupan el 100% del ancho de la pantalla: uno con el 15% flotando a la izquierda y el otro con el 85 flotando a la derecha. Utilicé el método resizable()
de jQuery UI para poder ajustar el ancho del primer div
pero al cambiar su tamaño el segundo se desplaza hacia abajo
¿Hay alguna forma de que al cambiar el tamaño del primero el otro vaya ajustando su ancho también? Lo intenté modificando su CSS con un condicional, pero no logro captar el nuevo tamaño del div
luego de hacer el resize.
Éste es mi código:
$(document).ready(function() {
$(".files-tree").resizable();
});
div.files-tree{
height: 100px;
width: 15%;
background-color: #303030;
float: left;
resize: horizontal;
overflow: hidden;;
max-width: 30%;
}
div.work-area{
height: 100px;
width: 85%;
background-color: #606060;
float: right;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<div class="files-tree"></div>
<div class="work-area"></div>