How to prevent padded child element to overflow its parent?

Question

As you can see from this example, the input seems to "overflow" its parent div. I'd like to add padding to the input without making it overflow its parent.

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

See the answer to this previous question: [width: 100%-padding?](http://stackoverflow.com/questions/5219175/width-100-padding) — John Lawrence, Jun 09 '12 at 23:47

score 26 · Accepted Answer · edited May 23 '17 at 12:00

26

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

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

Live jsFiddle example

edited May 23 '17 at 12:00

Community

1
1

answered Jun 09 '12 at 23:57

Fong-Wan Chau

2,259
4
26
42

Indeed the best solution, unfortunately is CSS3 – Ricardo Rodrigues Jun 09 '12 at 23:59
1

@RicardoRodrigues Most modern browser already support this property, see: http://caniuse.com/#search=box-sizing – Fong-Wan Chau Jun 10 '12 at 00:02
Uhm.. didn't know was so supported. Thanks and sorry. – Ricardo Rodrigues Jun 10 '12 at 00:04
@RicardoRodrigues No problem, you won't get any problem if your site is for IE8+, but if your visitors is from IE6/7, then you need a conditional comments for IE and then load other CSS for override that. – Fong-Wan Chau Jun 10 '12 at 00:08

score 2 · Answer 2 · answered Jun 09 '12 at 23:48

2

Padding adds to the width of your object. One option would be to remove the left/right padding from the input and just use text-indent, although this removes the right padding.

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

Alternatively, instead of using hardcoded pixel-widths for your padding, you could use percentages, and subtract that value from the width:

.inside{
    padding: 3%;
    width: 94%;
}

answered Jun 09 '12 at 23:48

jeffjenx

17,041
6
57
99

The problem not want the text on input near the border. But thanks for the tip – Ricardo Rodrigues Jun 09 '12 at 23:51
Well , that one of the solutions I thought. Will see other responses , because I'm looking the best way and crossbrowser solution. Other idea was using position: absolute; right:0; left:0 and define a width , then center using margin: auto; – Ricardo Rodrigues Jun 09 '12 at 23:56

score 0 · Answer 3 · answered Jun 09 '12 at 23:39

0

Don't specify the width of the inside div as 100%. A div will automatically fit the width of its parent container. Demo

answered Jun 09 '12 at 23:39

sachleen

30,730
8
78
73

Thanks for the try, but was .. but the example in stackoverflow was input. – Ricardo Rodrigues Jun 10 '12 at 00:42
Yeah I know I realized during my testing I just removed the `/2/` from the URL to get back to what I thought was your original code. But it wasn't. My mistake. – sachleen Jun 10 '12 at 00:58

score 0 · Answer 4 · answered Jun 09 '12 at 23:47

Looks like the input is inside the div but is located in the top left corner. Because the input takes-up 100% of the div's width it obscures the red background of the div. The div is longer so it sticks out the bottom making it seem like the input is on-top. Do the following:

Apply the padding to the CSS of the outside div not the input box.
You could apply a margin to the input if you want but I think padding the containing div is better.
- Make the input box less wide than the div (<100%)

Then not fit perfectly center. Thanks for the help – Ricardo Rodrigues Jun 09 '12 at 23:52 — Ricardo Rodrigues, Jun 09 '12 at 23:52

How to prevent padded child element to overflow its parent?

4 Answers4