erol_smsr erol_smsr - 27 days ago 7
CSS Question

Input element takes extra space

I have a simple HTML markup that contains a container with two columns inside. Each column has an

<input>
element with the type
text
and the other an
<a>
element.

<div class="container align-center">
<div class="col col-440">
<input type="text" name="pickup-info" placeholder="Afhaaladres">
</div>
<div class="col col-60">
<a class='submit-link' href="#">Go</a>
</div>
<div style="clear:both;"></div>
</div>


The CSS:

.container {
margin: auto;
width: auto;
max-width: 960px;
text-align: center;
}
@media (max-width: 1024px) {
.container {
margin-left: 30px;
margin-right: 30px;
}
}

.col {
display: inline-block;
float: left;
}
@media (max-width: 768px) {
.col {
display: block;
float: none;
width: 100% !important;
}
}

/* 440 + 60 = 500 */
.col-440 { width: 440px; }
.col-60 { width: 60px; }

.align-center { text-align: center !important; }


With this code, the elements inside their columns looks like this:
enter image description here

As you can see, the input element with type
text
has this 5px extra space on the right side, which results in the
<a>
element to overlapping the
<input>
element. How can I get rid of it?

Answer

It seems like there is CSS missing in your example code, but it looks like you added a padding on top of width of 100%. You can solve this with adding

box-sizing:border-box

to your text input

Comments