Nonexistent right margin on float: right item? - html

Question

I've got this bit of HTML:
<div id="content">
<h1 id="prompt">What's on your mind?</h1>
<form action="post.php" method="POST" id="message-form">
<textarea placeholder="Type in anything you want to share. Anything at all."></textarea>
<p>Feel free to type up to <span id="character-count">2000 characters</span>, or to use Markdown formatting.</p>
<input type="submit" class="submit button" value="Share" />
<br class="clearfix" />
</form>
</div>
and this CSS:
/* CSS Reset
-------------------------------------------*/
* {
margin: 0;
padding: 0;
}
.clearfix {
clear: both;
}
/* UI Elements
-------------------------------------------*/
.button {
background-color: #ccc;
background-image: -webkit-linear-gradient(white, #ccc);
background-image: -moz-linear-gradient(white, #ccc);
background-image: -ms-linear-gradient(white, #ccc);
background-image: -o-linear-gradient(white, #ccc);
background-image: linear-gradient(white, #ccc);
border: 1px solid #999;
border-radius: 10px;
color: #333;
cursor: pointer;
font-family: Arial, Helvetica, Sans-serif;
font-size: 13px;
outline: none;
padding: 3px 8px;
text-decoration: none;
}
.button:hover {
border-color: #666;
}
.button:active {
background-color: #bbb;
background-image: -webkit-linear-gradient(#ccc, white);
background-image: -moz-linear-gradient(#ccc, white);
background-image: -ms-linear-gradient(#ccc, white);
background-image: -o-linear-gradient(#ccc, white);
background-image: linear-gradient(#ccc, white);
}
/* Content
-------------------------------------------*/
#content {
margin: 10px;
}
/* Prompt
-------------------------------------------*/
#prompt {
color: #888;
font-weight: normal;
}
/* Message Box
-------------------------------------------*/
#message-form {
width: 600px;
}
#message-form textarea {
border: 1px solid #ccc;
border-radius: 6px;
display: block;
font-family: Georgia, Times New Roman, Times, Serif;
font-size: 16px;
min-height: 100px;
outline: none;
padding: 5px;
resize: vertical;
width: 100%;
-webkit-transition: border-color 0.25s ease-in-out;
-moz-transition: border-color 0.25s ease-in-out;
-ms-transition: border-color 0.25s ease-in-out;
-o-transition: border-color 0.25s ease-in-out;
transition: border-color 0.25s ease-in-out;
}
#message-form textarea:hover {
border-color: #666;
}
#message-form textarea:focus {
border-color: #3bf;
box-shadow: 0 0 5px #3bf;
}
#message-form p {
color: #666;
float: left;
font-size: 13px;
margin: 3px;
}
#message-form .submit {
float: right;
margin-right: 0;
}
What I'm trying to accomplish is to float an element rightwards within a particular amount of space. This works, but there's about 10 pixels' space to the right of the button that don't appear to exist! It's not padding from the parent element, nor margin on the button as far as I can see... so where is it coming from? Below is an image of the problem, and the full code can be found at https://github.com/minitech/MiniTicket. Here's a demo on jsFiddle, too.
Sorry for the overload of code, but I can't seem to reproduce the problem in a simple way.

Answer 1

Keep in mind that setting width: 100% and any amount of horizontal padding will cause your element to have a width beyond 100% (unless it's an input element, in which padding is applied inside of the element).
In your case, your textarea width is 610px. The submit button is properly floated to the far right of your 600px width container.
See: http://jsfiddle.net/Wexcode/KX7wd/1/
Replacement for padding in textarea: http://jsfiddle.net/Wexcode/KX7wd/2/