CODEWITHSUNDEEP
htmlcss
erol_smsr
erol_smsr

Reputation: 1496

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: Screenshot

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?

Upvotes: 1

Views: 698

Answers (1)

ilwcss
ilwcss

Reputation: 226

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

Upvotes: 2

Related Questions