maxum maxum - 19 days ago 5
CSS Question

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

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

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.

Comments