How to get a text box with 100% width and keep your stock?

Question

Given the following CSS

.comment { margin: 10px; display: block; overflow: auto; border-top-left-radius: 5px 5px; border-top-right-radius: 5px 5px; border-bottom-right-radius: 5px 5px; border-bottom-left-radius: 5px 5px; -webkit-box-shadow: rgba(0, 0, 0, .2) 1px 1px 3px; -moz-border-radius: 5px; -webkit-border-radius: 5px; min-height: 200px; width: 100% } 

This applies to textarea , but the right edge is ignored and textarea disconnected from the screen.

Why is this?

Answer 1

By setting the width to 100% and the 10px field, the text field will have 100% width of the container shifted down and to the left by 10px

To get the desired result, you probably need to use a container around the text box with an indent of 10px.

See an example .

• commentA uses a container with padding
• commentB - your original CSS

so something like:

 <div class="comment-container"> <textarea class="commentA"></textarea> </div> 

and

 .comment-container { padding:10px; } .commentA { width:100%; min-height: 200px; } 

to get started.