6

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?

Improve this question
2
  • Can you show how your HTML is structured? Commented Jun 11, 2011 at 2:22
  • 1
    Are you trying to make the textarea width fluid? Commented Jun 11, 2011 at 2:32

2 Answers 2

Reset to default
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.

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

I had to use 'margin: 10px' rather than padding for it to work. But the put it in a container was the solution.
0

Just use:

display: inline

Instead of:

display: block
Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.