Input text and submit in one line - html

Question

How to make this effect (cross-browsed) without using float: left?
I need to center this form so float attribute is wrong for me. Anybody can help?
I've made code as you can see below.
My code:
footer input[type=text] {
border-top: 1px solid #efefef;
border-left: 1px solid #efefef;
border-bottom: 1px solid #efefef;
border-right: 0;
width: 230px;
padding: 0 10px;
font-size: 16px;
line-height: 18px;
height: 35px;
display: inline-block;
float: left;
margin: 0 auto;
}
footer input[type=submit] {
border: 1px solid #df242b;
background: #df242b url('../../../gfx/submit.jpg') no-repeat center center;
color: #fff;
width: 38px;
height: 37px;
font-size: 18px;
line-height: 18px;
cursor: pointer;
display: inline-block;
float: left;
margin: 0 auto;
}

Answer 1

Because you want it cross-browser and without using float:left, you can use inline-block with vertical-align:top
And to center, you need to apply margin:0 auto to footer with some width instead
I made a few tweaks to your code.
*,
*::before,
*::after {
box-sizing: border-box
}
body {
margin: 0;
/* demo */
background: lightgreen
}
footer {
/*fix inlin block gap */
font-size: 0;
margin: 0 auto;
width: 265px; /* 230px + 35px */
}
footer input {
line-height: 18px;
height: 35px;
display: inline-block;
vertical-align: top;
}
footer input[type=text] {
border: solid #efefef;
border-width: 1px 0 1px 1px;
width: 230px;
padding: 0 10px;
font-size: 16px;
}
footer input[type=submit] {
border: 1px solid #df242b;
background: #df242b url('//dummyimage.com/35x35') no-repeat center center;
color: #fff;
width: 35px;
font-size: 18px;
cursor: pointer
}
<footer>
<input type="text">
<input type="submit">
</footer>

Answer 2

Your code without float:left actually works fine. Maybe you experience the line break on small sized screens. If it is the case, just add a piece of CSS for your footer like this example.
footer {
white-space: nowrap;
text-align: center;
}
footer input[type=text] {
border: 1px solid #efefef;
border-right: 0;
width: 230px;
padding: 0 10px;
font-size: 16px;
line-height: 18px;
height: 35px;
display: inline-block;
margin: 0 auto;
}
footer input[type=submit] {
border: 1px solid #df242b;
background: #df242b url('../../../gfx/submit.jpg') no-repeat center center;
color: #fff;
width: 38px;
height: 37px;
font-size: 18px;
line-height: 18px;
cursor: pointer;
display: inline-block;
margin: 0 auto;
}
<footer>
<input type="text" />
<input type="submit" />
</footer>

Answer 3

Use like this
<style>
body{margin:0;}
footer{
width:100%;
background:#ccc;
height:250px;
}
.form{
width:292px;
margin:0 auto;
}
footer input[type=text] {
border-top: 1px solid #efefef;
border-left: 1px solid #efefef;
border-bottom: 1px solid #efefef;
border-right: 0;
width: 230px;
padding: 0 10px;
font-size: 16px;
line-height: 18px;
height: 37px;
display: inline-block;
float: left;
margin: 0 auto;
}
footer input[type=submit] {
border: 1px solid #df242b;
background: #df242b;
color: #fff;
width: 38px;
height: 37px;
font-size: 18px;
line-height: 18px;
cursor: pointer;
display: inline-block;
float: left;
margin: 0 auto;
}
</style>
<footer>
<div class="form">
<input type="text">
<input type="submit" value=">">
</div>
</footer>