Floating my button to the right is not working

Question

I´m here with a strange situation, trying to float my button input[type="submit"] to the right.

I have space there and so I´m floating the button to the right to stand beside my input text.

But the float is not working and the button is not going, in any way, to the right.

My jsfiddle with problem illustrated:

http://jsfiddle.net/ritz/5Nq2N/1/

My Html:

<footer id="footer-container">
    <section id="footer1">
      <div id="col">             
         <h1>NEWSLETTER</h1>
         <p>Register in our Newsletter.</p>

         <form action="" name="newsletter" method="post" enctype="multipart/form-data">
            <label id="email-label2">
             <i class="fa fa-envelope-o"></i>
             <input type="text"id="email2" name="email" placeholder="e-mail"  required/>
            </label>http://jsfiddle.net/#save
            <br />
            <label id="submit">
              <input type="hidden" name="news_register" value="register" />
              <input type="submit" name="register" value="Register" src="" />
            </label>     
         </form>
     </div>
    </footer>

My Css:

#footer-container
{
    width:100%; 
    float:left; 
    background:brown; 
    height:auto;    
}

#footer1
{
    width:320px;
    margin:15px 10px 15px 10px;
    height:auto;    

}

#col
{
    float:left;
     margin-right:53px;

}

#col h1
{
    border-bottom:1px dashed #ccc;
    font-family:'bariol_boldbold';
    color:#fff; 
    width:300px;
    font-size:17px;
    font-weight:bold; 
    margin-bottom:10px; 
}


#col p
{
    width:300px;
    color:#fff;
    text-align:justify;
    color:#ccc; 
    font-size:14px; 
    font-family:'bariol_regularregular'; 
    margin-bottom:10px;
}  



input[type="text"] 
{
    font-size: 14px;
    line-height: 20px;
    padding: 4px 3px;

}

#email2 
{
    padding-left: 20px;
    text-indent:5px;
    width:172px;
    height:18px;
     -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    font-family:'Tahoma';
    font-size:14px;
    color:#000;
}



input[type="submit"]
{
    float:right; 
    margin-right:5px;
    text-align: left;
    font-family: 'Tahoma';
    font-size: 14px;
    color: #333;
    margin-top:10px;
    outline:none;
    background: blue; 
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    outline:none;
    cursor: pointer;
    color:#fff;
    width: 70px;
    height: 26px;
    text-align:center;
    border:1px solid #3c3412; 
    margin-bottom:15px;

}

Answer 1

You had a couple of problems with the semantics and broken tags. I fixed it up and and updated the CSS: http://jsfiddle.net/5Nq2N/3/

Tips:

1. Don't place input fields inside label elements. Labels should describe the input field and sit above them. <label for="email">Enter your email</label>
2. Float the container with your items in it, the containers will stack against each other.
3. Clear your floats ;)
4. Read CSS Mastery by Andy Budd, its a great foundation.

<footer id="footer-container">
            <section id="footer1">
                <div id="col">             
                    <h1>NEWSLETTER</h1>
                    <p>Register in our Newsletter.</p>

                    <form action="" name="newsletter" method="post" enctype="multipart/form-data">
                        <div id="email-label2">
                            <i class="fa fa-envelope-o"></i>
                            <input type="text"id="email2" name="email" placeholder="e-mail"  required />
                        </div>

                        <div id="submit">
                            <input type="hidden" name="news_register" value="register" />
                            <input type="submit" name="register" value="Register" />
                        </div>
                        <div class="clear"></div>     
                     </form>
                </div>
           </section>
</footer>

.clear {
  clear: both;
}

#footer-container
{
    width:100%; 
    float:left; 
    background:brown; 
    height:auto;    
}

#footer1
{
    width:320px;
    margin:15px 10px 15px 10px;
    height:auto;    

}

#col
{
    float:left;
     margin-right:53px;

}

#col h1
{
    border-bottom:1px dashed #ccc;
    font-family:'bariol_boldbold';
    color:#fff; 
    width:300px;
    font-size:17px;
    font-weight:bold; 
    margin-bottom:10px; 
}


#col p
{
    width:300px;
    color:#fff;
    text-align:justify;
    color:#ccc; 
    font-size:14px; 
    font-family:'bariol_regularregular'; 
    margin-bottom:10px;
}  



input[type="text"] 
{
    font-size: 14px;
    line-height: 20px;
    padding: 4px 3px;

}

#email2 
{
    padding-left: 20px;
    text-indent:5px;
    width:172px;
    height:18px;
     -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    font-family:'Tahoma';
    font-size:14px;
    color:#000;
    float: left;
}

#submit {
    float: left;
    margin: 5px 0px 0px 5px;
}

input[type="submit"]
{
    text-align: left;
    font-family: 'Tahoma';
    font-size: 14px;
    color: #333;
    outline:none;
    background: blue; 
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    outline:none;
    cursor: pointer;
    color:#fff;
    width: 70px;
    height: 26px;
    text-align:center;
    border:1px solid #3c3412; 
    margin-bottom:15px;

}

Answer 2

Ignoring the float, your layout looks like this:

/----------------Container------------------\
| [Text input here]                         |
| [Submit button here]                      |
\-------------------------------------------/

Now let's factor in the float:right:

/----------------Container------------------\
| [Text input here]                         |
|                      [Submit button here] |
\-------------------------------------------/

See how even though there's room, it's not magically moving up.

Now, let's try moving the submit button to be before the text input in your layout:

/----------------Container------------------\
| [Submit button here]                      |
| [Text input here]                         |
\-------------------------------------------/

Result with float:

/----------------Container------------------\
| [Text input here]    [Submit button here] |
\-------------------------------------------/

Yay! But... having the submit button before the text is not very semantic at all. What else can be done?

Well, you could try removing the <br /> tag.

Adjust margins as needed!