CODEWITHSUNDEEP
htmlcss
Jamie Anderson
Jamie Anderson

Reputation: 1493

width 100% doesn't wrap within parent with padding?

I have a parent, .mainWrap with 10px padding, but my input with width 100% doesn't wrap properly?

It stretched out at the right side, but it align fine with the padding on the left.

FIDDLE

input[type="text"], input[type="password"] {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #DDD;
    display: block;
    margin-bottom: 8px;
    overflow: hidden;
    margin: 0 auto 8px auto;
}

Upvotes: 0

Views: 283

Answers (2)

NachoDawg
NachoDawg

Reputation: 1544

Using the css

box-sizing:border-box;

Might work, but it is not compatible with, i think, IE 7 and down. Instead, since your inputs apparently are trying to occupy the full width of their wrapper, consider 

display:block; width:auto;

Here's an article explaining it. The gist is that "width:auto" will occupy its parents width while including its own padding and border. "Width:100%" on the other hand just makes sure that the elements inner width is the same width as its parent, and the padding and border is extra.

Width:auto only works on block-level elements, like a typical "div" or "p", so simply making the inputs block level elements and applying width:auto instead of 100% should do the trick

Upvotes: 0

Kristiyan Kostadinov
Kristiyan Kostadinov

Reputation: 3712

You need to add:

input, label, button, div{
    box-sizing:border-box;
}

This is because, by default, the box-sizing is content-box. This means that the element width is actually 100% + the padding.

Upvotes: 2

Related Questions