Отсутствие правого края при поплавке: правый элемент?

Question

Я получил это битый 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 <a href="http://daringfireball.net/projects/markdown/syntax">Markdown</a> formatting.</p> 
     <input type="submit" class="submit button" value="Share" /> 
     <br class="clearfix" /> 
    </form> 
</div> 

и этот 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; 
} 

То, что я пытаюсь выполнить это плавающее элемент правоты в пределах определенного объема пространства. Это работает, но справа от кнопки находится около 10 пикселей пространства, которое не существует! Это не дополнение от родительского элемента, а также маркер на кнопке, насколько я могу видеть ... так откуда он исходит? Ниже приведено изображение проблемы, и полный код можно найти по адресу https://github.com/minitech/MiniTicket. Here's a demo on jsFiddle, too.

Извините за перегрузки кода, но I can't seem to reproduce the problem in a simple way.

Answer 1

Имейте в виду, что установка width: 100% и любое количество горизонтальных padding заставит ваш элемент иметь ширину свыше 100% (если это не input элемент, в котором набивка применяется внутри элемента).

В вашем случае ваша ширина textarea составляет 610 пикселей. Кнопка отправки правильно размещена в крайнем правом углу контейнера ширины 600 пикселей.

См: http://jsfiddle.net/Wexcode/KX7wd/1/

Замена для заполнения в текстовое поле: http://jsfiddle.net/Wexcode/KX7wd/2/