Dixit Singla Dixit Singla - 7 months ago 6
Javascript Question

how to display two divs side by side, left div with fixed position, right div having vertical scroll

I am creating a web page where I have to display two div elements side by side.

I want left div with fixed position and the right div should scroll.

HTMl Structure:

<div id="fixed-position">
<ul>
<li><a></a></li>
<li><a></a></li>
<li><a></a></li>
<li><a></a></li>
</ul>
</div>
<div id="result">
It contains a big table
</div>


In the above html on clicking an "a" tag I am making an ajax call getting one big table as response and assigning it to the second div having attribute
id="result"


Please help me to resolve this problem.
Thanks.

Answer

    <div style="overflow:hidden;width:100%;">
    <div  style="width:50%;height:100px;overflow:hidden;float:left;background-color:#009900;">
  <ul>
    <li>aaaaaa</li>
    <li>bbbbbb</li>
    <li>cccccc</li>
    <li>dddddd</li>
  </ul>
      </div>
    <div  style="width:50%;height:100px;overflow-x:hidden;overflow-y:scroll;float:right;background-color:#00CCFF;"  id="result">
   It contains a big table <br>
   It contains a big table <br>
   It contains a big table <br>
   It contains a big table <br>
   It contains a big table <br>
   It contains a big table <br>
   It contains a big table <br>
      </div>
      </div>