Press Awesome Press Awesome - 3 months ago 16
CSS Question

Responsive input field and submit button using display:table-cell

I am trying to have the input field and the submit button stretch across the screen in the same row. Basically so the submit button does not ever go below the input field. Not even sure if I need to add an extra or not. I know that I have seen a way to have a responsive input field and submit button using display:table-cell, but I have not been able to find it lately. Any help would be appreciated.

**EDIT

I added: margin-left: -8px; to the submit button and that did the trick. Not sure if there is a better way but this works. Any other ways would be appreciated as well.



#div1{
display:table;
width:100%;
}
#div2{
display:table-cell;

}
input[type="email"].form-control {
width: 80%;
padding: 0px;
margin: 0px;
}
input[type="submit"].btn.btn-primary {
width: 20%;
padding: 0px;
margin: 0px;
margin-left: -8px;
}

<div id="div1">
<div id="div2">
<input type="email" name="EMAIL" class="form-control"
placeholder="Enter your E-mail Address">
<input type="submit" value="Subscribe" class="btn btn-primary">
</div>
</div>




Answer

The line feed between the two s creates a space between them on the page. You have to remove the line feed, or use this trick :

<input type="email" name="EMAIL" class="form-control" placeholder="Enter your E-mail Address"><!--
--><input type="submit" value="Subscribe" class="btn btn-primary">

Also you have to remove border because it has 2px border so it's width is 20%+80%+ 2px+2px+2px+2px(left and right for two inputs) use

border:0;

check this updates jsfiddle please Check this post remove spaces between inputs