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

Question

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    lt div style  width 100    gt       lt div style  margin-left 45px  width 100    gt       lt asp TextBox ID  txtTitle  runat  server  Width  100   gt  lt  asp TextBox gt  lt br   gt       lt  div gt   lt  div gt    If I don t do the 100   then the textbox is not 100  wide

User · Answer

lt div style  width 100    gt       lt div style  margin-left 45px   gt          lt asp TextBox ID  txtTitle  runat  server  Width  100   gt  lt  asp TextBox gt  lt br   gt       lt  div gt   lt  div gt

User · Answer

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

User · Answer

A div is a block element and by default 100  wide  You should just have to set the textarea width to 100

User · Answer

If some other portion of your layout is influencing the div width you can set width auto and the div  which is a block element  will fill the space   lt div style  width auto  gt       lt div style  margin-left 45px width auto  gt           lt asp TextBox ID  txtTitle  runat  server  Width  100   gt  lt  asp TextBox gt  lt br   gt       lt  div gt   lt  div gt    If that s still not working we may need to see more of your layout HTML CSS

User · Answer

I realise this is an old post but this might benefit somebody who  like me  has come to this page from a google search and is at their wits end   None of the other answers given here worked for me and I had already given up hope  but today I was searching for a solution to another similar problem with divs  which I found answered multiple times on SO  The accepted answer worked for my div  and I had the sudden notion to try it for my previous textbox issue - and it worked  The solution   add box-sizing  border-box to the style of the textbox   To add this to all multi-line textboxes using CSS  add the following to your style sheet   textarea     box-sizing  border-box      Thanks to thirtydot for the solution at  width  100 -padding   and  Content of div is longer then div itself when width is set to 100

User · Answer

Add some css either in the head or in a external document  asp TextBox are rendered as input    input        width 100       Your html should look like   http   jsfiddle net c5WXA   Note this will affect all your textbox   if you don t want this  give the containing div a class and specify the css    divClass input        width 100

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

Examples related to css

Examples related to html

Examples related to margin