Question

I am working on a responsive website and I ran into a problem with the form. I have a outer container that hold the form and the submit button. When the user’s browser reaches 524px or smaller the submit button will move below the outer container. Everything works fine in Firefox but when I’m using Safari/Chrome the submit button will not move back into the outer container.

I have an example of the problem here: yourl.co

Here is my HTML:

<div id="content">
<div id="formContent">
<form id="forms">
    <input id="email" type="email" class="text" placeholder="[e-mail]" name="user[email]"/>
    <input id="submit" type="button" class="text" name="user[submit]" value="Notify Me!"/>
</form>
</div>
</div>

And here is my CSS:

#content{
width:100%;
max-width:573px;
height:auto;
margin:45px auto 0 auto;
}
#formContent{
width:99%;
height:56px;
margin:40px auto 0 auto;
background-color:#f6f5f5;
}
#forms{
border:none;
height:51px;
}
#forms #email{
width:75.1%;
height:51px;
border:none;
margin-top:2px;
background-color:#f6f5f5;
margin-left:6px;
}
#forms #email[type="email"]{
font-family:ubuntu-light;
font-weight:100;
font-size:1.875em;
color:#7baec6;
}
#forms #email[type="email"]:focus{
color:#498cab;
outline:none;
}
#forms #submit{
width:21.5%;
height:47px;
float:right;
margin-right:6px;
margin-top:5px;
border:1px solid #0e5779;
cursor:pointer;
}
@media only screen and (max-width: 524px){
#formContent{
    width:95%;
    max-width:524px;
    margin:40px auto 73px auto;
}
#forms #email{
    width:95%;
    border:none;
    margin-top:2px;
    background-color:#f6f5f5;
    margin-left:6px;
}
#forms #submit{
    width:125px;
    margin:12px auto 0 auto;
    float:none;
    display:block;
}
}

If you need anymore information I will be glad to provide it. Thanks for your help!

Answer 1

If you’ll add css float: left; to #forms #email everything will be fine.

You can test it here: http://jsfiddle.net/witchfinderx/qwnXT/1/