Left column should expand to fill gap from second column css

Question

If I have two columns side by side, I want the first column to take up remaining space dependent on the size of the second column.

So in this fiddle

.container {
  width: 100%;
}

#leftColumn {
  background-color: blue;
  width: 50%;
  height: 100vh;
  float: left;
}

#rightColumn {
  background-color: yellow;
  width: 50%;
  height: 100vh;
  float: left;
}

when the second column is resized, the blue column should widen to move the yellow column to the edge of the browser so there is no extra space in the view.

How can I set this up for the first column in css?

look at the flexbox answer ... or simply look at all the answers — Temani Afif, Apr 13 '18 at 14:59

score 0 · Answer 1 · answered Apr 13 '18 at 14:55

change the width of the blue div to calc(100% - widthOfYellow) when you resize the yellow one

window.resizeRightColumn = function() {
  $('#rightColumn').width('100px');
  $('#leftColumn').width('calc(100% - 100px)');
}

.container {
  width: 100%;
}

#leftColumn {
  background-color: blue;
  width: 50%;
  height: 100vh;
  float: left;
}

#rightColumn {
  background-color: yellow;
  width: 50%;
  height: 100vh;
  float: left;
}

#button {
  position: absolute;
  top: 5px;
  left: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div id="leftColumn">

  </div>
  <div id="rightColumn">

  </div>
</div>
<button id='button' onclick='resizeRightColumn()'>
Resize
</button>

Left column should expand to fill gap from second column css

1 Answers1