I'm having trouble getting a scrollbar on my div element when the content is too wide. Instead, the scrollbar always appears on the window itself. I have tried adjusting the overflow settings but can't seem to find the right solution.
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;
}
This setup includes a header, body, and footer using a table structure. In the body section, I want a div element to expand to the full width and height of the table cell. When I resize the window, I expect the header and footer to resize accordingly while the body displays a scrollbar if the content overflows.
Thank you!