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 su

Answer 1

The problem arises because you do not have a static height set for #content. If you set a static height for content ( padding + textArea + submitButton ) and set that as the height for #content, then it will look allow the room for everything.

#content {
width: 60%;
background: #ffffdffffd;
color: #000;
margin: 0 auto;
border-radius: 4px;
margin-bottom: 10px;
height: 140px; //Play with this number to get it perfect.

}

Answer 2

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 3

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

Answer 5

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