Отсутствует правое поле с плавающей точкой: правильный элемент?

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. Вот также демонстрационная версия для jsFiddle.

Извините за перегрузку кода, но Кажется, я не могу воспроизвести проблему простым способом .

Answer 1

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

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

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

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