Hugo Pakula
Hugo Pakula

Reputation: 385

Place two form elements inline

I currently have 1 form with 2 elements inside it (an email input and a submit button). This form looks like this for me: Form on my computer But some of my associates seem to have it looking like this: form on my associates computers

My relevant HTML looks like this:

<header>
<div class="wrap nopad">
<h1>Share and Listen to Music.</h1>
<form>
<input type="email" placeholder="Email address to get started"><input type="submit" value="Get Started">
</form>
</div>
</header>

and the relevant CSS looks like this:

body {
    background-color: #1B1B1E;
    color: #fff;
    margin:0;
    padding: 0;
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
}
.wrap {
    width:685px;
    padding:0 15px;
    margin:0 auto;
    display: block;
}
.wrap.nopad {
    width:700px;
    padding: 0;
}
header {
    width:100%;
    padding:200px 0 100px;
    background-color: #2de6c0;
    display: block;
}
header .wrap h1 {
    color:#000;
    text-align: center;
    display: block;
    font-weight:bolder;
    text-transform: uppercase;
    font-size:45.4px;
    letter-spacing: 0px;
}
header .wrap h1 span {
    text-decoration: underline;
}
header form {
    padding:20px 0 0;
    width:660px;
    margin:0 auto;
}
input[type=email] {
    color:#000;
    padding:20px;
    display: inline-block;
    outline: 0;
    border: 0;
    width:470px;
    text-transform: uppercase;
    font-size:24px;
    font-weight: 500;
}
input[type=submit] {
    background-color: #000;
    color:#FFF;
    text-transform:uppercase;
    font-size:16px;
    padding:25px 20px;
    display: inline-block;
    font-weight:500;
    outline: 0;
    border: 0;
    cursor: pointer;
    float: right;
}

Could you please point me in the right direction so I can fix my code to work in all browsers and be inline.

Thanks!

Upvotes: 0

Views: 514

Answers (1)

Gibbs
Gibbs

Reputation: 22956

Fiddle

 Reduce the padding of black submit button button.
 input[type=submit]
 {
   padding: 25px 16px;
 }

See the Demo

Demo2

 It ll give you best design

 input email button --> Width:71.4%

 submit button  ---> Remove left and right padding and add width 22.54%

Upvotes: 1

Related Questions