I have 2 nested div's that should be 100% wide. Unfortunately the inner div with the Textbox overflows and is actually larger than the outer div. It has a left margin and overflows by about the size of the margin.
How can I fix that?
<div style="width:100%;">
<div style="margin-left:45px; width:100%;">
<asp:TextBox ID="txtTitle" runat="server" Width="100%"></asp:TextBox><br />
</div>
</div>
If I don't do the 100%, then the textbox is not 100% wide.
Just remove the width from both divs.
A div
is a block level element and will use all available space (unless you start floating or positioning them) so the outer div will automatically be 100% wide and the inner div will use all remaining space after setting the left margin.
I have added an example with a textarea
on jsfiddle.
Updated example with an input.