Scrolling div inside another div

Question

Here is my code:

<form id="form1" runat="server">
<div style="width:100%;">
    <asp:FormView ID="fvXCAR" runat="server" DefaultMode="Edit" style="overflow:auto">
        <ItemTemplate></ItemTemplate>
        <EditItemTemplate>
            <div style="width:800; overflow:auto;">
                <asp:Table ID="tblXCAR" runat="server"></asp:Table>
            </div>
        </EditItemTemplate>            
    </asp:FormView>
</div>
</form>

And here is my question:

I want the internal div (the one with overflow:scroll) to scroll. If I set that div to any fixed value, the scroll works properly. If I set it to 100%, the outer div scrolls, not the inner one. However, I'd like to be able to set both divs width to auto/100% because my users have many different screen sizes/resolutions.

Thanks, John

Answer 1

Situations like this generally require javascript to run on page load and page resize. That javascript would measure the new width of the parent div and then set the child div's width to match. The child would then have the "overflow: auto" text, and the parent would have width: 100%.