Left div sidebar extend down to bottom dynamically

Question

I have a left sidebar that is fixed width (px) and my main content which is on the right side.

Here is my demo: http://jsfiddle.net/fxWg7/4031/

Here is the code:

Here is my html code:

<div class="left">
  left content fixed width
</div>
<div class="right">
  right content flexible width
  <br>
  <br> right content flexible width
  <br>
  <br> right content flexible width
  <br>
  <br> right content flexible width
  <br>
  <br> right content flexible width
  <br>
  <br> right content flexible width
  <br>
  <br> right content flexible width
  <br>
  <br> right content flexible width
  <br>
  <br> right content flexible width
  <br>
  <br> right content flexible width
  <br>
  <br> right content flexible width
  <br>
  <br> right content flexible width
  <br>
  <br> right content flexible width
  <br>
  <br> right content flexible width
  <br>
  <br> right content flexible width
  <br>
  <br> right content flexible width
  <br>
  <br> right content flexible width
  <br>
  <br> right content flexible width
  <br>
  <br>
</div>

here is my CSS:

.left {
  width: 180px;
  float: left;
  background: #aafed6;
}

.right {
  background: #e8f6fe;
  width: auto;
  overflow: hidden;
}

How can I make it so that the height of my left sidebar will stretch the same length as the main content dynamically?

I got my answer here: http://stackoverflow.com/questions/2997767/how-do-i-keep-two-divs-that-are-side-by-side-the-same-height — baileyJchoi, May 02 '17 at 23:55

Michael Coker · Accepted Answer · 2017-05-03T00:09:14.957

use display: flex on the parent, and both children will stretch to match the height of the parent.

.container {
  height: auto;
  overflow: hidden;
  display: flex;
}

.left {
  width: 180px;
  background: #aafed6;
}

.right {
  background: #e8f6fe;
}

<div class="container">
  <div class="left">
    left content fixed width
  </div>
  <div class="right">
    right content flexible width
    <br>
    <br> right content flexible width
    <br>
    <br> right content flexible width
    <br>
    <br> right content flexible width
    <br>
    <br> right content flexible width
    <br>
    <br> right content flexible width
    <br>
    <br> right content flexible width
    <br>
    <br> right content flexible width
    <br>
    <br> right content flexible width
    <br>
    <br> right content flexible width
    <br>
    <br> right content flexible width
    <br>
    <br> right content flexible width
    <br>
    <br> right content flexible width
    <br>
    <br> right content flexible width
    <br>
    <br> right content flexible width
    <br>
    <br> right content flexible width
    <br>
    <br> right content flexible width
    <br>
    <br> right content flexible width
    <br>
    <br>
  </div>
</div>

or display: table;

.container {
  height: auto;
  overflow: hidden;
  display: table;
  width: 100%;
}

.left, .right {
  display: table-cell;
}

.left {
  width: 180px;
  background: #aafed6;
}

.right {
  background: #e8f6fe;
}

<div class="container">
  <div class="left">
    left content fixed width
  </div>
  <div class="right">
    right content flexible width
    <br>
    <br> right content flexible width
    <br>
    <br> right content flexible width
    <br>
    <br> right content flexible width
    <br>
    <br> right content flexible width
    <br>
    <br> right content flexible width
    <br>
    <br> right content flexible width
    <br>
    <br> right content flexible width
    <br>
    <br> right content flexible width
    <br>
    <br> right content flexible width
    <br>
    <br> right content flexible width
    <br>
    <br> right content flexible width
    <br>
    <br> right content flexible width
    <br>
    <br> right content flexible width
    <br>
    <br> right content flexible width
    <br>
    <br> right content flexible wid
    </div>

yes that works but flexbox is not supported on all browsers. what way can I use that works the most browsers? — baileyJchoi, May 02 '17 at 23:52
Flexbox has ~97% browser support. You can also use `display: table`, that supports back to like ie8 I think. Updated my answer with that. — Michael Coker, May 03 '17 at 00:09

Left div sidebar extend down to bottom dynamically

1 Answers1