maxum maxum - 1 year ago 62
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
but the right margin is ignored and the
goes off the screen.

why is this?

Answer Source

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>


.comment-container {
.commentA {
    min-height: 200px;

to get started.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download