I have structure as shown in the fiddle http://jsfiddle.net/5LN7U/.

 <section class="container">
    <section class="field">
        <ul>
            <li> Question 1  </li>
            <li> question 2 </li>
            <li> question 3 </li>
            <li> question 4 </li>
            <li> question 5 </li>
            <li> question 6 </li>
            <li> question 7 </li>
        </ul>

    </section>
    <section class="datawrap">
        <section class="datawrapinner">
            <ul>
                <li><b>Answer 1 :</b></li>
                <li><b>Answer 2 :</b></li>
                <li><b>Answer 3 :</b></li>
                <li><b>Answer 4 :</b></li>
                <li><b>Answer 5 :</b></li>
                <li><b>Answer 6 :</b></li>
                <li><b>Answer 7 :</b></li>
            </ul>
        </section>
    </section>

</section>

Basically its a table structure made using divs. The first column contains a long list of questions and the second column contains answers/multiple answers which can be quite big ( there has to be horizontal scrolling in the second column.)

The problem i am facing is when i scroll downwards the second column which has the horizontal scroll bar is also scrolling downward. I want horizontal scrollbar to be fixed there. as in it should be always fixed there no matter how much i scroll vertically.

Much Like Google Spreadsheets: where the first column stays fixed and there's horizontal scrolling on rest of the columns with over vertical scrolling for whole of the data.

I cannot used position fixed in the second column.

P.S : please no lectures on using div's for making a table structure. I have my own reasons.

and its kinda urgent. Thanks in advance.