Right border of label is not showing

Question

I've built a little login-form. Unfortunately the right borders of the inputs just don't show up as you can see in the attached screenshot: enter image description here

I've built it based on the suggestions from this post to have the inputs aligned right of the labels and still use the remaining space.

HTML:

<div id="wrapper">
    <form id="loginform">
        <label for="username">Username:</label>
        <span><input name="username" id="username" type="text" autofocus /></span>

        <label for="password">Password:</label>
        <span><input name="password" id="password" type="password" /></span>

        <input id="loginBtn" type="submit" name="submit" value="Login" />
    </form>
</div>

CSS:

#wrapper {
    height: auto;
    background-color: #dfe9f6;
    margin: 40px 8px 8px 8px;
    padding: 8px;
    border: 1px solid #99bce8;
}
span {
    margin-bottom: 8px;
    display: block;
    overflow: hidden;
}
label, input {
    height: 17px;
}
label {
    float: left;
    width: 80px;
}
input {
    border: 1px solid #abadb3;
    width: 100%;
}
input[type="submit"] {
    height: 22px;
}

(Not) working example on JSFiddle: http://jsfiddle.net/kN4wa/1/

I've tested in Firefox 19 & Chrome 25 and would really appreciate some help with it!

Thanks

Romain Pellerin · Answer 1 · 2013-03-21T21:37:57.993

2

Simply add

input {
    border: 1px solid #abadb3;
    -moz-box-sizing: border-box; /* partially supported */
    box-sizing: border-box; /* here is what I added */
    width: 100%;
}

edited Mar 21 '13 at 21:37

answered Mar 21 '13 at 21:31

Romain Pellerin

2,470
3
27
36

upvoted for this answer.. Alternatively, you can make the width of the input element fixed in pixels rather than percentage. Make sure you get an understanding of the box model too: http://www.w3schools.com/css/css_boxmodel.asp – Subliminal Hash Mar 21 '13 at 21:36

dezman · Accepted Answer · 2013-03-21T21:35:05.520

1

You have input { width: 100%; } so, the border is adding on to this width, making it higher than the width of the parent, which is why it doesn't show up; make it width: 99.5%; or just 99% instead. Or add box-sizing: border-box; to input.

With vendor prefix:

-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box;    /* Firefox, other Gecko */
box-sizing: border-box;         /* Opera/IE 8+ */

edited Mar 21 '13 at 21:35

answered Mar 21 '13 at 21:29

dezman

18,087
10
53
91

For me the box-sizing did the trick and shows up correct in all browsers I use. The smaller width wouldn't have been an option because it'd have broken the alignment with the login-button at the right... – suamikim Mar 21 '13 at 21:40

Right border of label is not showing

2 Answers2