CODEWITHSUNDEEP
htmlcsscss-float
Ry-
Ry-

Reputation: 224886

Nonexistent right margin on float: right item?

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 <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>

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.

Problem screenshot

Sorry for the overload of code, but I can't seem to reproduce the problem in a simple way.

Upvotes: 2

Views: 2504

Answers (1)

Wex
Wex

Reputation: 15695

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/

Upvotes: 6

Related Questions