Width issues with complex scrolling behaviour in a Div - css

Question

We need to display data in a scrollable div.
We have created a simplified fiddle to demonstrate: http://jsfiddle.net/ZsQ5J/3/
The div contains two parts, a header and the content.
We want the Header to scroll horizontally along with the content, but to be fixed while vertical scrolling through the content.
We would like to achieve this completely in CSS if possible, we could solve it with jQuery I guess, but would prefer not to have to.
We have got most of the way there in CSS, but we can't get the content div to stretch the full width of the header. Because, I guess, making the content div 100% of the containing div isn't the full width of the header.
In a little more depth:
HEADER:
We want the header to stay visible all the time when scrolling up/down through the content. However the header is wider than the containing div so we do want it to scroll horizontally. (So no vertical scroll on the header, just horizontal). We have got this part working. The header is a table.
CONTENT:
The content is a div that we want to scroll both horizontally (in sync with the header) and vertically (independently of the header). This is the part we are having problems with. The scroll is working well, but the width is not expanding to match the header. It will only go as wide as the containing div.
I know it's weird to have a table as the header and a div as the content, but due to legacy issues we need to keep it this way.

Answer 1

Not sure from the question if you can add addition elemnts to markup, but if you can, possible solution is this: http://jsfiddle.net/ZsQ5J/8/
But there is possible problem — scrollbar will not be seen bu default. Is it ok this way?

Answer 2

Not sure if this is exactly what you want but this works.
-Wakeeta
body
{
width:100%;
}
#outer_container
{
margin-top:20px;
margin-left:auto;
margin-right:auto;
width:100%;
border:6px solid #FF0000;
overflow-x:auto;
overflow-y:hidden;
}
#top_container
{
display: block;
width:1500px;
padding:10px;
background-color:#CC66FF;
}
#bottom_container
{
height: 400px;
width:1500px;
padding:10px;
background-color:#FFFF66;
overflow-y:scroll !important;
}
em
{
font-weight:bold;
}