float puts submit button outside of div

Question

I am having some trouble with my css, I have a content id and then inside that I have a class that is just padding. When inside the padding class, I have a textarea and a submit button. By default, the submit button is on the left: But when I go to align the submit button to either the left or right of the content, it will go ther ebut it will also go outside of the content, like it's not part of it anymore: These are my html and css codes

html:

<div id="content">
        <div class="content-padding">
            <textarea class="content-post" placeholder="Update your status..."></textarea>
            <input type="submit" class="content-submit">
        </div>
    </div>

css:

#content {
    width: 60%;
    background: #dddddd;
    color: #000;
    margin: 0 auto;
    border-radius: 4px;
    margin-bottom: 10px;
    height: auto;

}
.content-padding {
    padding: 10px;
}
.content-post {
    width: 97.5%;
    height: 80px;
    border: 0px;
    background: #fff;
    resize: none;
    padding: 10px;
    outline: none;
    margin-bottom: 5px;
    border-radius: 4px;
}
.content-submit {
    background: #005ddb;
    width: 70px;
    height: 30px;
    border: 0px;
    border-radius: 4px;
    color: #fff;
    outline: none;
    cursor: pointer;
    float: right;
}

I hope someone cal help me fix this as soon as possible, thanks!

Answer 1

You need to trigger the layout of .content-padding or add a clearing element.

.content-padding {
    padding: 10px;
    overflow:hidden ; /* minds inside and outside floatting elements, fine if no size given */
}

or a generated clearing element.

.content-padding:after {
    content:'';
    display:block; /* or whatever else than inline */
   clear:both;
}

Learn more about floatting elements : http://css-tricks.com/all-about-floats/

Answer 2

add overflow: auto under #content in your CSS.

Another option would be to add another div in your markup right after the submit button.

<div class="clear"></div>

In your CSS you would then add the following.

.clear{
    clear: both;
}

fiddle

Answer 3

You can create a div with clear:both style after the button:

<div id="content">
    <div class="content-padding">
        <textarea class="content-post" placeholder="Update your status..."></textarea>
        <input type="submit" class="content-submit">
        <div style="clear:both"></div>
    </div>
</div>

The float attribute makes the height of element zero, then the parent div do not recognize the height of element.

Answer 4

Try this:

#content:after {
     visibility: hidden;
     display: block;
     font-size: 0;
     content: " ";
     clear: both;
     height: 0;
}

From http://css-tricks.com/snippets/css/clear-fix/.