Question

I am trying to make this form:

And this is what I get:

(I changed the button color, I know =) )

Here is my HTML:

 <form method="post" action="">
      <input type="text" id="email" name="email" value="Email" />
      <input type="submit" value="Keep me notified" id="submitButton"
 </form>

Here is my CSS:

form{
    width:350px;
    margin: 20px auto;
    display:block;
}
input[type=text]{
      display:inline-block;
      font-family: 'PT Serif Caption', serif;
      border:1px solid #CCCBC2;
      display:inline;
      font-size:14px;
      width:300px;
      line-height: 16px;
      padding: 9px 10px;
      height: 18px; 
      margin:0;
      margin-bottom: 5px;
      outline: 0;
      vertical-align: middle;
      width: 269px;
      float:left;

      -webkit-font-smoothing: antialiased;  
      -webkit-border-radius:3px;
      -moz-border-radius:3px;
      -o-border-radius:3px;
      -ms-border-radius:3px;
      border-radius:3px;
}
input[type=submit] {
  display: inline-block;    
  background:none;
  padding:0 14px;
  height: 36px;
  margin: 1px 0 0 15px;
  text-align: center;
  font-size: 15px;
  overflow: visible;
  color: white;
  background-color: #2459a9;
  border:none;
  font-family: 'PT Serif Caption', serif;
  text-transform: lowercase;
  text-decoration: none;
  cursor: pointer;

  -webkit-font-smoothing: antialiased;
  -webkit-border-radius:3px;
  -moz-border-radius:3px;
  -o-border-radius:3px;
  -ms-border-radius:3px;
   border-radius:3px;

}

My Q:

• How do I get the floats right? Or is it something else?

• Can you do it in html5? Cool, show me =)

• How do a implement a placeholder in the inputbox

• How do I get big letter in the button?

Answer 1

Two things:

1. The form is too narrow for the total width of the inputs. So for the fiddle you provided, it should be 464px.

2. Use white-space: nowrap; on the form.

See it at jsFiddle.