20

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.

Remy
  • 12,555
  • 14
  • 64
  • 104

6 Answers6

28

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.

jeroen
  • 91,079
  • 21
  • 114
  • 132
  • 2
    If I remove the width then the textbox stays small, e.g. does not become 100%. – Remy Apr 12 '11 at 15:30
  • @Remy I´m not familiar with asp but if you are generating a `textarea` or an `input` you can just use css to set the width to 100%. – jeroen Apr 12 '11 at 15:33
  • Actually this is what happens. But the div around it will not be 100% if I don't add the width part. – Remy Apr 12 '11 at 15:33
  • @Remy What does the generated html look like? By the way, I have added an example. – jeroen Apr 12 '11 at 15:37
  • the asp.net control `` will render something close to `` – MikeM Apr 12 '11 at 15:39
  • @mdmullinax Thanks, I was guessing either a textarea or an input, I´ll change the example. – jeroen Apr 12 '11 at 15:47
7

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

wdm
  • 7,121
  • 1
  • 27
  • 29
3

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

<div style="width:auto">
    <div style="margin-left:45px;width:auto">
        <asp:TextBox ID="txtTitle" runat="server" Width="100%"></asp:TextBox><br />
    </div>
</div>

If that's still not working we may need to see more of your layout HTML/CSS

MikeM
  • 27,227
  • 4
  • 64
  • 80
  • Actully, there was a float:left on the div from deep down in the CSS. Not sure why I missed that. – Remy Apr 13 '11 at 09:38
1

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%?

Community
  • 1
  • 1
Ciara
  • 384
  • 2
  • 12
1
<div style="width:100%;">
    <div style="margin-left:45px;">
       <asp:TextBox ID="txtTitle" runat="server" Width="100%"></asp:TextBox><br />
    </div>
</div>
Calum
  • 5,308
  • 1
  • 22
  • 27
1

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%;
}
David
  • 1,101
  • 5
  • 19
  • 38