2

Tengo 2 divs 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>

2
  • 1
    añade tu código para ver el problema
    – Rene Limon
    Commented el 9 feb. 2017 a las 16:35
  • Post editado con el codigo.
    – DVertel
    Commented el 9 feb. 2017 a las 16:57

1 respuesta 1

1

Podrías usar flex para esto. La idea sería poner ambos div dentro de un contenedor con display:flex y luego al segundo div (el del 85%) le añadirías la propiedad flex:1 quitándole el ancho. Al tener flex:1 el ancho automáticamente será el ancho restante del contenedor.

Algo como esto:

$(document).ready(function() {

  $(".files-tree").resizable();
  
});
div.contenedor {
  display:flex;
}
div.files-tree{
  height: 100px;
  width: 15%;
  background-color: #303030;
  float: left;
  resize: horizontal;
  overflow: hidden;;
  max-width: 30%;
}
div.work-area{
  height: 100px;
  background-color: #606060;
  float: right;
  flex:1;
}
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div class="contenedor">
  <div class="files-tree"></div>
  <div class="work-area"></div>
</div>

1
  • Muchas gracias Alvaro, efectivamente de esa forma ha funcionado.
    – DVertel
    Commented el 9 feb. 2017 a las 19:17

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.