Width in CSS not working correctly

Question

So I'm having a really weird issue with my submit button. I'm using width:100% on the submit button, and it is in a "wrap" So, basically it should be the full width, but ultimately I can't seem to get it to work. Here's a screen shot of what I'm talking about

enter image description here

As you can see the input fields are all working correctly with the width:100%, but the submit isn't working. Here's the code to the corresponding issue.

The HTML part.

<div class="wrap">
    <form>
        <div>
            <input type="text" placeholder="Name">
        </div>
        <div>   
            <input type="text" placeholder="Email">
        </div>
        <div>   
            <input type="password" placeholder="Password">
        </div>
        <div>
            <input type="submit">
        </div>  
    </form>
</div>

And the CSS to it.

input[type=submit] {
    font-family: "Avenir", "Helvetica Neue", Helvetica, Arial, sans-serif;
    display: block;
    height: 52px;
    width: 100%;
    margin: 0 auto;
    background: #27A6D1;
    text-align: center;
    color: #fff;
    line-height: 52px;
    font-size: 20px;
    font-weight: 500;
    cursor: pointer;
    padding: 0;
    border: none;
}
.wrap {
    width: 320px;
    margin: 0 auto;
    padding: 40px 0;
}
input {
    width: 100%;
    height: 52px;
    margin: 0 0 10px;
    font-size: 18px;
    font-family: "Avenir", "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: #333;
    background: #fff;
    padding: 0 14px;
    outline: none;
    border: 1px solid #ccc;
}

I can get it to work with something like width: 109%, but I would prefer using 100, and a reason or explanation why this isn't working, Any ideas guys?

Also, find a fiddle here.

Are you sure it's the button? Maybe the button is right and the inputs are wrong (i.e. the inputs having padding which is actually overflowing the width: 320px. EDIT: I'd say after you posted your full CSS, that the inputs are wrong. The 14px padding is probably causing the inputs to extend beyond the container boundaries... — War10ck
– War10ck, Commented May 5, 2014 at 21:04
Is it not because of the padding in the wrap? Is it the same in all browsers, I.E for example — Graham Warrender
– Graham Warrender, Commented May 5, 2014 at 21:07
It's the input. You can tell when you add a border to the wrap: jsbin.com/qehijana/2 — GolezTrol
– GolezTrol, Commented May 5, 2014 at 21:09

Terry · Accepted Answer · 2014-05-05 21:06:32Z

4

A quick fix would be using box-sizing: border-box on all input elements in the form, and then declare a uniform width: this will ensure that the width is computed as the final border-box width (inclusive of border widths and paddings).

input {
    box-sizing: border-box;
    width: 100%;
}

You can then safely customize the padding for each individual input element (if you desire so), without having to worry how they affect the final width of the element.

Here's a proof-of-concept fiddle constructed based on the markup you have provided ;) http://jsfiddle.net/teddyrised/kx39z/

answered May 5, 2014 at 21:06

Terry

66.7k16 gold badges107 silver badges127 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Idris Over a year ago

Works like a charm. Thanks. I'll accept when I can. Also +1 for the fiddle

Terry Over a year ago

@Colourity Thanks :) also added a JSFiddle to demonstrate how box-sizing: border-box solves the issue.

Ejaz · Accepted Answer · 2014-05-05 21:08:07Z

3

you need to add box-sizing: border-box to your input class. The right/left padding in your input boxes make them wider than the defined width.

answered May 5, 2014 at 21:08

Ejaz

8,8723 gold badges38 silver badges52 bronze badges

4 Comments

Will Over a year ago

heh. Just about to post that. :) A fiddle to make @ejay's case. jsfiddle.net/willthemoor/LcbFS

Idris Over a year ago

Would of marked it as an answer, just that you posted second.

GolezTrol Over a year ago

Actually, you don't have to do that. You can just omit the padding on the wrap and the width on the inputs (they are display: block already). Better to remove some CSS that to add extra for neutralizing the false effects.

Ejaz Over a year ago

I would take it the other way, i.e., removing a valid style (padding) to avoid its unforeseen effects (increased width) instead of remedying the effects (using box-sizing). Removing padding will remove the white space before and after the text in the text box. before white space can be achieved, I think, by text-indent but what about the right space?

meadowstream · Accepted Answer · 2014-05-05 21:11:00Z

1

input { padding: 0 14px; } makes the input 100% + 28px wide

answered May 5, 2014 at 21:11

meadowstream

4,1592 gold badges22 silver badges24 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 11:50:22Z

0

It is the padding: 0 14px; that is breaking the layout (as JimmyRare's answer).

The accepted solution uses the box-sizing property, but some older browsers might not have support to it, and it may cause other side effects.

I'd suggest to do the trick by replacing it with text-indent: 14px;.

edited May 23, 2017 at 11:50

CommunityBot

11 silver badge

answered May 5, 2014 at 22:43

falsarella

12.5k10 gold badges75 silver badges119 bronze badges

Collectives™ on Stack Overflow

Width in CSS not working correctly

4 Answers 4

2 Comments

4 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related