Geek Answers Handbook

How to prevent a child from overflowing with a child?

As you can see from this example , input seems to overflow the parent div . I would like to add a padding to input without overflowing its parent element.

I would like to know the best solution / workaround for each browser (including IE, Firefox, Chrome, etc.).

+8
html css padding width
source share
4 answers

You can see this answer , but if you don't like it, you can use the box-sizing CSS3 property as follows:

 input { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

Live jsFiddle example

+25
source share

Filling adds to the width of your object. One option is to remove the left / right pad from the input and just use text indentation, although this removes the correct pad.

 .inside{ background: blue; border: none; padding-bottom: 10px; padding-top: 10px; text-indent: 10px; width: 100%; }

Alternatively, instead of using a fixed pixel width for your padding, you can use percentages and subtract this value from the width:

 .inside{ padding: 3%; width: 94%; }
+2
source share

Do not specify the width of the inner div as 100% . The div will automatically match the width of its parent container. Demo

0
source share

It looks like the input is inside the div, but is in the upper left corner. Since the input occupies 100% of the width of the div, it closes the red background of the div. The div is larger, so it sticks out the bottom, and it looks like the entrance is on top. Follow these steps:

  • Apply CSS padding to the outer div, not the input field .
    You can apply margin to input if you want, but I think padding containing a div is better.
    • Make the input field less wide than div (<100%)
0
source share

More articles:


All Articles