Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

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.

like image 295
Remy Avatar asked Apr 12 '11 15:04

Remy


People also ask

How do you make a margin 100 width?

You have to use calc(100% - 10px) (space between number and minus).

How do you make a div 100 width?

What you could do is set your div to be position: absolute so your div is independent of the rest of the layout. Then say width: 100% to have it fill the screen width. Now just use margin-left: 30px (or whatever px you need) and you should be done.

Does width 100% include padding?

No, element width does not include padding, margin, or border. The basic difference between padding and width is that in padding you define the space around the element and on the other hand in the width you define the space of the element.


2 Answers

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.

like image 157
jeroen Avatar answered Sep 28 '22 05:09

jeroen


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

like image 32
wdm Avatar answered Sep 28 '22 03:09

wdm