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 />

If I don’t do the 100%, then the textbox is not 100% wide.

CSS: Make a div fill remaining space on right-hand side, without inner content overflowing

I have a fixed-width left div, and I want to make the right div fill the remaining space. So far I’ve been taking this approach recommended by another SO poster, but it doesn’t work if I have content

100% width table overflowing div container

I am having issues with an html table that is overflowing it’s parent container. I have setup a sample jsfiddle here to illustrate the problem. How can I force both the header text and the table cell

how to make inner left div take up 100% minus “right side fixed width div”

I want the right div to have a fixed width and the left div to take up everything else inside the box. <div id=’outer’ style=’width:100%’> <div id=’inner1′></div> <div id=’inner2′

2 divs aligned side by side, how to make right div fill width 100%?

I’m wondering what the best way to go about doing this is… I have 3 divs: container: width = 100%, holds 2 inner divs inner_left div: width changes dynamically, but no wider than 200px (will hold a

Weird overlap on only right side of child div from parent div when child width set to 100%

I have a parent div and child div. The child div width set to 100%. Both have borders on them of 2px. What is strange is the left edge of the child div shows up while the right edge seems to be cove

div width 100% without overflowing to next line

<div id=transport> <div id=design_header> </div> <div id=design_image> </div> <div id=design_right_content> Lorem Ipsum is simply dummy text of the printing

Width 100% of space between floated left and right div

I have a div on the left side and on the right side, both fixed width. I have a middle div witch is also fixed width. I want the middle div to stay in the middle of left and right div no matter screen

Two divs side by side, right div fixed width

I know this has been asked a million times before but i still can’t seem to find the answer (most questions seem to be the opposite of what i want not the same). I have two divs say #left and #right.

Fixed Right Side Div scrolling

I plan to have one right side navigation bar and content displayed on the left div. I tried searching for similar questions asked and tried to implement the solution but they do not seem to answer my

How to create two div elements, the left side has a fixed width and the right side has a dynamic width

I want to create two div elements, the left side has a fixed width(ex: 200px) and the right side has a dynamic width(ex: 100%). I have created, but does not work as required. HTML <div id=header&


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

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.

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 />

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

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

Add some css either in the head or in a external document. asp:TextBox are rendered as input :

input {

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 {

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:

  box-sizing: border-box;

Thanks to thirtydot for the solution at

width: 100%-padding?


Content of div is longer then div itself when width is set to 100%?