float pone botón de enviar fuera de div

Estoy teniendo algunos problemas con mi css, tengo una identificación de contenido y luego tengo una clase que solo está rellenando. Cuando estoy dentro de la clase de relleno, tengo un área de texto y un botón de envío. Por defecto, el botón de enviar está a la izquierda: introduzca la descripción de la imagen aquí Pero cuando voy a alinear el botón de enviar a la izquierda o derecha del contenido, irá más allá, pero también saldrá del contenido, como si ya no formara parte de él: introduzca la descripción de la imagen aquí Estos son mis códigos html y css.

html:

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

Espero que alguien me ayude a solucionar esto lo antes posible, gracias!

.content-padding activar el diseño de .content-padding o agregar un elemento de compensación.

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

o un elemento de compensación generado.

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

Obtenga más información sobre los elementos flotantes: http://css-tricks.com/all-about-floats/

agregue overflow: auto bajo #content en su CSS.

Otra opción sería agregar otro div en su marca justo después del botón enviar.

 

En tu CSS, entonces agregarías lo siguiente.

 .clear{ clear: both; } 

violín

Puedes crear un div con clear: ambos estilos después del botón:

 

El atributo float hace que la altura del elemento sea cero, luego el div principal no reconoce la altura del elemento.

Prueba esto:

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

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

El problema surge porque no tiene una altura estática establecida para #content. Si establece una altura estática para el contenido (padding + textArea + submitButton) y la establece como la altura para #content, entonces se verá el espacio para todo.

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

}