html - one div fixed while other scrollable -

this might duplication of questions out there different in 1 aspect.

this basic structure of page , how looks , trying achieve make left part of div fixed while right side part scrollable , once product related stuff overs both of them gets scrolled showing footer.

i trying mimic basic structure on here flipkart.

what tried:

<div class="container">   <div class="row">   <div class="col-md-4" style="position:fixed;">     xx     xx     x     x     x     x     x     x     x     x     x   </div>   <div class="col-md-8" style="margin:30%;overflow:scroll;">     <ul> <li>item 1</li> <li>item 2</li> <li>item 3</li> <li>item 4</li> <li>item 5</li> <li>item 6</li> <li>item 7</li> <li>item 8</li> <li>item 9</li> <li>item 10</li> <li>item 11</li> <li>item 12</li> <li>item 13</li> <li>item 14</li> <li>item 15</li> <li>item 16</li> <li>item 17</li> <li>item 18</li> <li>item 19</li> <li>item 20</li> <li>item 21</li> <li>item 22</li> <li>item 23</li> <li>item 24</li> <li>item 25</li> <li>item 26</li> <li>item 27</li> <li>item 28</li> <li>item 29</li> <li>item 30</li> <li>item 31</li> <li>item 32</li> <li>item 33</li> <li>item 34</li> <li>item 35</li> <li>item 36</li> <li>item 37</li> <li>item 38</li> <li>item 39</li> <li>item 40</li> </ul>   </div>   </div> </div> 

it didn't work out me, approach towards , solution?

you cannot use pure css make works , need jquery , here solution, first calculate product div height using jquery ,then add result in followto() . can height of element using jquery following :

.height() - returns height of element excludes padding, border , margin.

.innerheight() - returns height of element includes padding excludes border , margin.

.outerheight() - returns height of div including border excludes margin.

.outerheight(true) - returns height of div including margin.

var windw = this;  $.fn.followto = function ( pos ) {      var $this = this,          $window = $(windw);            $window.scroll(function(e){          if ($window.scrolltop() > pos) {              $this.css({                  position: 'absolute',                  top: pos              });          } else {              $this.css({                  position: 'fixed',                  top: 0              });          }      });  };    $('#z').followto($('#pro').height());

#z {      background:blue;      padding:20px;      width:30%;      position:fixed; top:0px; left:0;      float:left;  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>  <div class="container">    <div class="row">    <div class="col-md-4" id="z">      xx      xx      x      x      x      x      x      x      x      x      x    </div>    <div id="pro" class="col-md-8 flot" style="margin:30%;">      <ul>  <li>item 1</li>  <li>item 2</li>  <li>item 3</li>  <li>item 4</li>  <li>item 5</li>  <li>item 6</li>  <li>item 7</li>  <li>item 8</li>  <li>item 9</li>  <li>item 10</li>  <li>item 11</li>  <li>item 12</li>  <li>item 13</li>  <li>item 14</li>  <li>item 15</li>  <li>item 16</li>  <li>item 17</li>  <li>item 18</li>  <li>item 19</li>  <li>item 20</li>  <li>item 21</li>  <li>item 22</li>  <li>item 23</li>  <li>item 24</li>  <li>item 25</li>  <li>item 26</li>  <li>item 27</li>  <li>item 28</li>  <li>item 29</li>  <li>item 30</li>  <li>item 31</li>  <li>item 32</li>  <li>item 33</li>  <li>item 34</li>  <li>item 35</li>  <li>item 36</li>  <li>item 37</li>  <li>item 38</li>  <li>item 39</li>  <li>item 40</li>  </ul>    </div>    </div>  </div>  <footer>this footer  footer  footer  footer  footer  footer  footer  footer  footer  footer  footer  footer  footer  footer  footer  footer  footer  footer  footer  footer  footer  footer  footer  footer  footer  footer  footer  footer  footer  footer  footer  footer  footer  footer  footer  footer  footer  footer  footer  footer  footer  footer  footer  footer  footer  footer  footer  footer  footer  footer  footer  </footer>