scrollbars are showing on window instead of on my div

Question

I'm not able to get a scrollbar on my div when the content is too wide. Instead i always get the scrollbar on the window itself. I have played around with the overflow settings but i just can't manage to get it right.

jsFiddle

HTML

<table class="wrapper" cellSpacing="0" cellPadding="0">
    <tr>
        <td class="header">
            <div>
                <p class="title">HEADER</p>
                <p class="subtitle">subheader</p>
            </div>
        </td>
    </tr>
    <tr>
        <td class="content">
            <div class="clearfix">
                <div class="col4">
                    <div>
                        <label class="fieldname">Field 1</label>
                        <span class="fieldcontrol"><input type="text" id="Text1" /></span>
                    </div>
                    <div>
                        <label class="fieldname">Field 2</label>
                        <span class="fieldcontrol"><input type="text" id="Text2" /></span>
                    </div>
                    <div>
                        <label class="fieldname">Field 3</label>
                        <span class="fieldcontrol"><input type="text" id="Text3" /></span>
                    </div>
                    <div>
                        <label class="fieldname">Field 4</label>
                        <span class="fieldcontrol"><input type="text" id="Text4" /></span>
                    </div>
                </div>
            </div>
        </td>
    </tr>
    <tr>
        <td class="footer">
            <div class="clearfix">
                <div class="left">
                </div>
                <div class="right">
                    <button type="submit">Ok</button>
                    <button>Cancel</button>
                </div>
            </div>
        </td>
    </tr>
</table>

CSS

.content > div
{
    overflow: auto;
}

It's a header, body and footer using a table. in the body i want a div to stretch full width and height of the table cell. and when i resize the window i want the header and footer to keep resizing and the body to display a scrollbar when content is outside the visible area.

Thanx!

Answer 1

Wouldn't it be easier to work with just divs? http://jsfiddle.net/tP79v/2/

html

<div class="header">Header</div>
<div class="main">
    <div class="toBig"></div>
</div>
<div class="footer"></div>

css

.body {
    overflow:hidden;
}

.header {
    position: absolute;
    top:0;
    left:0;
    width:100%;
    height:30px;
    background-color:lightblue;
}

.main {
    position: absolute;
    top:30px;
    bottom: 20px;
    width:100%;
    left: 0;
    background-color:red;
    overflow: auto;
}

.toBig {
    position:relative;
    width: 1000px;
    height: 200px;
    background-color:yellow;
    margin:20px;
}

.footer {
    position: absolute;
    bottom:0;
    left:0;
    height:20px;
    width:100%;
    background-color:green;
}