Textarea Width 100%

I'm trying to make a textarea that takes up 100% of the width of the DIV that contains it.

Using CSS, I gave it "width:100%" and that works pretty well in both FF and IE. However, when I TYPE anything into the box in IE, the width grows a little bit and pushes past the DIV's borders.

The style looks like this:

.quickViewTextArea {
      width: 100%;
      font-family:Verdana, Arial, Helvetica, sans-serif;
      font-size:11px;
}

If I get rid of the font stuff, the problem remains.

Any ideas? A better way to make a 100% width text area? I want it to flex as the page is resized.
aaron_karpAsked:
Who is Participating?
 
UnexplainedWaysConnect With a Mentor Commented:
The margin has me stumped, so i just wrote something that works


<html>
<style>

.quickView {
     width: 100%;
     margin-left: 0px;
     margin-right: 0px;
     padding:0px;
     text-align:center;
}

.quickViewTextArea {
     width: 98%;
     font-family:Verdana, Arial, Helvetica, sans-serif;
     font-size:11px;
}

</style>
<body>

<div class="quickView">
     <textarea class="quickViewTextArea"></textarea>
</div>

</body>
</html>
0
 
UnexplainedWaysCommented:
I just tried this code and it seems to work fine

<html>
<body>
  <div>
      <textarea style="width: 100%"></textarea>
  </div>
</body>
</html>


So my guess is it's the surounding code, so you might need to post that.

0
 
aaron_karpAuthor Commented:
Yeah, it's weird. You're right that it's the surrounding code. Through some trial and error, cut and paste, I narrowed it down to one class in my stylesheet:

.quickView {
      margin-left: 6px;
      margin-right: 6px;
}

And here's the code around the textarea:

            <div class="quickView">
                        <textarea class="quickViewTextArea " rows="30" cols="20"></textarea>
            </div>

For some reason, the margins are messing with everything. Weird. I guess I'll have to work around them? Any ideas why this is happening?
0
 
UnexplainedWaysCommented:
Change the 98% to make it whatever "fake margin" you want.
0
 
aaron_karpAuthor Commented:
Thanks for the help. I just scrapped those styles that were messing me up and added the padding/margins elsewhere =)
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.