csshtmlmargin

Div with margin-left and width:100% overflowing on the right side


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.


Solution

  • 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.