1

Boxes not aligning

Input going out of bounds

So I've come across an issue with my input box going out of bounds and I have no idea how to fix it. My select box and input box have the exact same CSS code. I've tried using max-width and vertical-align but both didn't work. Also tried using display: inline-block.

The difference between the 2 are exactly 4px even though both are set to 80% width

HTML


<form class="container_filterSelection">
    <label>Product Category</label>
    <select class="categorySelect">
        <option value="0"></option>
        <option value="1">Drills</option>
        <option value="2">More Drills</option>
        <option value="3">Give me them drills</option>
    </select><br>
    <label>Address</label>
    <input type="text" class="locationSelect">
    <button class="submit">Submit</button>
</form>

</html>

CSS

form {
    width: 75%;
    margin: auto;
    background: white;
}


/* Category Dropdown */

.categorySelect {
    width: 80%;
    margin: 16px 10%;
    padding: 16px 0;
}

/* Location Input */

.locationSelect {
    width: 80%;
    margin: 0 10% 16px 10%;
    padding: 16px 0;
}
1

1 Answer 1

2

Try like this:

form {
    width: 75%;
    margin: auto;
    background: white;
}


/* Category Dropdown */

.categorySelect {
    width: 80%;
    margin: 16px 10% 16px 10%;
    padding: 16px 0;
}

/* Location Input */

.locationSelect {
    width: 80%;
    margin: 0 10% 16px 10%;
    padding: 16px 0;
    box-sizing: border-box;
}
<form class="container_filterSelection">
    <label>Product Category</label>
    <select class="categorySelect">
        <option value="0"></option>
        <option value="1">Drills</option>
        <option value="2">More Drills</option>
        <option value="3">Give me them drills</option>
    </select><br>
    <label>Address</label>
    <input type="text" class="locationSelect">
    <button class="submit">Submit</button>
</form>

Adding box-sizing: border-box; to .locationSelect appears to fix it. The browser's user agent stylesheet appears to be adding this property to select elements but not to input, so to make them look the same, you need to correct for that.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.