Here I am facing a unique situation where I am attempting to align my button input[type="submit"] to the right side.
I have allocated space for it and therefore trying to float the button to the right so that it can be positioned next to my input text.
Unfortunately, the float property is not functioning as expected, and the button refuses to move towards the right.
To better illustrate the issue, here is the link to my jsfiddle:
http://jsfiddle.net/ritz/5Nq2N/1/
The HTML code snippet causing the problem:
<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>
The CSS styles affecting this layout:
#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;
}