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?

Can you show how your HTML is structured? – Seth Jun 11 '11 at 02:22 — Seth, Jun 11 '11 at 02:22
Are you trying to make the textarea width fluid? – pixelfreak Jun 11 '11 at 02:32 — pixelfreak, Jun 11 '11 at 02:32

score 11 · Accepted Answer · edited Nov 15 '16 at 09:47

11

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.

edited Nov 15 '16 at 09:47

s.alem

12,579
9
44
72

answered Jun 11 '11 at 02:39

MikeM

27,227
4
64
80

I had to use 'margin: 10px' rather than padding for it to work. But the put it in a container was the solution. – maxum Jun 11 '11 at 02:54

score 0 · Answer 2 · edited May 22 '18 at 18:51

0

Just use:

display: inline

Instead of:

display: block

edited May 22 '18 at 18:51

André Kool

4,880
12
34
44

answered May 22 '18 at 17:44

Areeb Ahmad

1

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

2 Answers2

Linked