CODEWITHSUNDEEP
htmlcss
J. Doe
J. Doe

Reputation: 85

Line up input, select, textarea to each other

Im tying to line up the fields i can't figure it out. As you can see they are not on eqaul width, how can I fix this . I'm not searching for a one time solution I want to learn how to fix this in nice way.

#login-panel {
    width: 400px;
}
.field {
    float: left;
    width: 50%;
}

#login-panel > .field > input, #login-panel > .field > select {
    border: 1px solid #ccc;
    padding: 1em;
    margin-bottom: 2px;
    width: 100%;
}
#login-panel > .textarea > textarea {
    width: 100%;
    resize: none;
}
        <form class="login-panel">
            <div id="login-panel">
                <div class="login-header">Login</div>
                <div class="field">
                    <input type="text" id="login-nickname" placeholder="Username">
                </div>
                <div class="field">
                    <input type="text" id="login-password" placeholder="Password">
                </div>
                <div class="field">
                    <select class="gender-name">
                    </select>
                </div>
                <div class="field">    
                    <select class="region-place">
                    </select>
                </div>
                <div class="textarea">
                    <textarea class="info" placeholder="Information"></textarea>
                </div>
            </div>
        </form>

Upvotes: 1

Views: 300

Answers (1)

Johannes
Johannes

Reputation: 67748

The reason for the inconsistency in sizes is that these elements have paddings, which are added to the width values. With box-sizing: border-box; they are included in the width.

So add this to your (inline) CSS:

#login-panel * {
    box-sizing: border-box;
}

Here's a codepen: http://codepen.io/anon/pen/mPXpeM

Upvotes: 2

Related Questions