textarea width problem

Discussion in 'CSS' started by Zourz, Apr 13, 2007.

0
  1. #1
    Hello world

    The code below displays a textarea in a red container of width 800px.
    I want to display a textarea with a width of 100%, but with a right margin of 200px.
    (200px space to the right of the textarea)

    The problem is that IE6 cannot interpret this correctly.
    When first loading the page, IE6 is able to correctly display the content, but
    as soon as I type anything in the textarea, the width of the textarea expands
    over the right margin space.

    In FF och IE7, this does not happen.

    What is wrong?
    (I do not want to set a static width to the textarea, only the right margin)

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
 <head>
  <title></title>

  <style>
   .container {
    background-color:#FF0000;
    width:800px;
    height:500px;
   }

   .textWrapper {
    margin-right:200px;
   }

   textarea {
    height:150px;
    width:100%;
   }
  </style>
 </head>

 <body>
  <!-- Red container -->
  <div class="container">

    <div class="textWrapper">
     <textarea></textarea>
    </div>

  </div>

 </body>
</html>
    HTML:
    Regards
     
    Zourz, Apr 13, 2007 IP
  2. Your Content

    Your Content Banned

    Messages:
    1,096
    Likes Received:
    45
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Try adding padding to your text area, as in example

    
   textarea {    
height:150px;    
width:100%;   
padding-right:10px;
}
    Code (markup):
     
    Your Content, Apr 13, 2007 IP
  3. Zourz

    Zourz Member

    Messages:
    10
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    36
    #3
    Thanks.
    Using padding instead solved the problem.
     
    Zourz, Apr 13, 2007 IP