views:

69

answers:

1

Hey, Here's what I am trying to do: There is one scrollable div with fixed size, say 400x400 px. Inside there are two divs: header div and data div. Both their height and width are variable. What I want to do is be able to scroll horizontally both header and data divs but vertically only the data. In other words, I want the header div be fixed vertically, but scrollable horizontally and data grid - fully scrollable. here's the setup:

<div style="height: 400px; width: 400px; overflow: scroll; position: static;" >
<div style="z-index: 7500; position: fixed; height: 100px; width: 800px">
    //header
</div>
<div style="poxition: relative; top: 100px; width: 800px; height: 2000px">
    //data
</div>
</div>

I tried something like this:

<div style="height: 400px; width: 400px; overflow: scroll; overflow-y: hidden; position: static;" >
<div style="z-index: 7500; height: 100px; width: 800px; position: relative">
    //header

<div style="height: 400px; width:auto; overflow: scroll; overflow-x: hidden; position: static;" >
    <div style="position: relative; top: 100px; width: 800px; height: 2000px">
        //data
    </div>
</div>

it works fine, except vertical scrollbar is... well... scrolled horizontally with my data div, i need it to be shown all the time.

I really don't want to use frames, so is it possible to do this with divs? mb, there're some properties, like style="position-y: fixed; position-x: relative" ?

thx

A: 

My solution is a little different from your HTML but fulfills your requirements

<HTML>
 <HEAD>
  <SCRIPT LANGUAGE="JavaScript">
    function syncScrolls()
    {
        document.getElementById('header').scrollLeft = document.getElementById('data').scrollLeft
    }
  </SCRIPT>
 </HEAD>

 <BODY>
 <div style="height: 100px; width: 400px; overflow: scroll; overflow:hidden" id="header">
     <div style="z-index: 7500; height: 100px; width: 800px; border: solid 1px green;">
            header
    </div>
</div>
  <div style="height: 400px; width: 400px; overflow: scroll; position: static;" onscroll="syncScrolls()" id="data">
    <div style="poxition: relative; top: 100px; width: 800px; height: 2000px; border: solid 1px green"">
        data
    </div>
</div>
 </BODY>
</HTML>
Gaurav Saxena
thanks! gonna use your solution. A bit laggy on firefox, though.. never thought.. )
exp