'How to resize two divs side by side like windows explorer

enter image description here

Hi I must create a page that RightCol must be resizable like windows explorer window. The size of each column must equal to the height of the browser. By resizing the browser, these two column must be resized.

My code don't work correctly. could an one help me , please?

/**jquery :**/

$("#LeftCol").resizable({
  maxHeight: 250,
  maxWidth: 900,
  minHeight: 150,
  minWidth: 200
});

$('#LeftCol').resize(function () {
  $('#RightCol').width($("#parent").width() - $("#LeftCol").width());
});
$(window).resize(function () {
  $('#RightCol').width($("#parent").width() - $("#LeftCol").width());
  $('#LeftCol').height($("#parent").height());
});
<link href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css" rel="stylesheet" />
#parent {
  position: relative;
  min-height: 300px;
  margin: 0;
  padding: 0;
  width: 100%;
}

#LeftCol {
  position: relative;
  float: right;
  min-height: 400px;
  width: 65%;
  background-color: #A2A;
  overflow:auto;
}

#RightCol {
  position: relative;
  float: right;
  min-height: 400px;
  width: 35%;
  background-color: #BBB;
  overflow:auto;
  max-height:300px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<div id="parent">
  <div id="RightCol"></div>
  <div id="LeftCol"></div>
</div>
javascriptjquerycss


Solution 1:[1]

I would set one to be resizable and the other one to be a flexbox.

https://codepen.io/anon/pen/YjJBZm

I took one of the answers already given and tried it out in this pen. Some adjustments were made.

HTML

#parent {
  display: flex;
  border: 1px solid #000;
  height: 75vh;
  width: 100%;
}

#LeftCol {
  flex-grow: 1;
  border: 1px solid red;
  resize: horizontal;
  overflow: auto;
}

#RightCol {
  flex-grow: 3;
  border: 1px solid red;
}
<div id="parent">
  <div id="LeftCol">LeftCol</div>
  <div id="RightCol">RightCol</div>
</div>

Solution 2:[2]

Solution using pure css Flexbox Layout http://codepen.io/gmrash/pen/epaqva

#parent {
  display: flex;
  border: 1px solid #000;
  height: 100vh;
}

#LeftCol {
  flex-grow: 3;
  border: 1px solid red;
}

#RightCol {
  flex-grow: 1;
  border: 1px solid red;
}
<div id="parent">
  <div id="LeftCol">LeftCol</div>
  <div id="RightCol">RightCol</div>
</div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 mplungjan
Solution 2 mplungjan

Related Questions