Date: 03/27/06 (Web Development)    Keywords: css, html, web

Situation: I'm writing a webpage that will be a report. The basic structure of the report can be seen in example1.jpg of the file linked below. The request is to have the two sections I've put a red box around scroll when there is too much data in those sections. (Everthing should always fit on one page and the whole page should never scroll - at any resolution).

I tried using an iframe and that ended miserably. It was also too complicated. So I tried CSS scrolling (using the overflow parameter). My results are seen in example2.jpg. Note that I only added the DIV to the first section, leaving the second section alone. I did this so you could see the difference. In the top section, the columns are now not aligned with their column title line. (See red arrows). I think this is because of the presence of the scrollbar.

Problem: I need the columns to line up - whether the scroll bar is there or not. (There could be as little as 1 record in the section, in which case no scroll bar should be present.)

Ideally, I'd like the scroll bar to appear outside of the table as seen in blue box on the second section. (That scroll bar was cut and pasted there, it's not part of the code or anything. Just an example).

Can someone save me, please?

Source: http://community.livejournal.com/webdev/309967.html