Menu
In the following code, both the INPUT and TEXTAREA elements render wider than they should. How can I limit them to 100% of the usable area within the div?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<style>
.mywidth{ width:100%; }
</style>
</head>
<body>
<div style="border: 3px solid green; width: 100px;">
<input class="mywidth" ><br />
<textarea class="mywidth"></textarea><br />
<div style="background-color: yellow;" class="mywidth">test</div>
</div>
</body>
</html>
Note: If I remove the DOCTYPE, it renders as expected, with the INPUT, TEXTAREA and inner DIV all the same width and not going outside the containing DIV.
Update: Not withstanding the default borders on those elements, it still appears to render incorrectly in IE7.
727
To prevent a text field from being resized, you can use the CSS resize property with its "none" value. After it you can use the height and width properties to define a fixed height and width for your <textarea> element.
Complete HTML/CSS Course 2022To add a multi-line text input, use the HTML <textarea> tag. You can set the size of a text area using the cols and rows attributes. It is used within a form, to allow users to input text over multiple rows.
The size of a textarea can be specified by the cols and rows attributes, or even better; through CSS' height and width properties. The cols attribute is supported in all major browsers.
Generally speaking an input field is a one-line field (probably to carry something like first name or last name, a phone number, an email). A textarea is a multi-line field that allows you to press ENTER!
I had this same problem. I used the box-sizing property mentioned here:
How can I make a TextArea 100% width without overflowing when padding is present in CSS?
Here's what it looked like for me:
<style>
.mywidth{
width:100%;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
</style>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
