How to have a textarea at 100% width and keep its margin?

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 is applied to a textarea but the right margin is ignored and the textarea goes off the screen.

why is this?

Answer 1

By setting the width to 100% and a margin of 10px the textarea will be a 100% width of it's container shifted down and to the left 10px

To get your desired result you'll probably need to use a container around the textarea with a 10px padding.

See example.

• commentA is using a container with padding
• commentB is 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.