Making textarea,div width 100% with padding CSS tip

Hello,

As you may be aware that textarea are used in almost every web application that accept user input through forms.

This is also true that we want to set textarea width to 100% most of the time but there is a stubborn problem associated with it and that problem is internal padding of textarea.

Lets consider this markup

The markup

[geshi lang=”html5″ nums=”1″ target=”_self” ]

Ok so that we have HTML to work with we should look at the CSS magic. but before that I would like to add something here.

Notice I have used in style (this is just for my examples) and added a padding to both textareas above. This is intentional because what happens is that if you try to put 100% width to our textarea then because textarea’s will be stretched from where the content start thus padding and border are generally added to the final with because out textarea is in a content-box mode by default.

So the final width is calculated in this manner

This is not what we wanted right? there is solution to this problem and is shown in the CSS below

[geshi lang=”css” nums=”1″ target=”_self” ]

As you can see that we are making use of CSS property box-sizing which is fixing our problem with our textarea width because it is considering our textarea as a box literally neglecting any styles applied to it.

Definitions

Definition from w3schools explaining content-box and border-box is below

Property Value	Description
content-box	The specified width and height (and min/max properties) apply to the width and height respectively of the content box of the element. The padding and border of the element are laid out and drawn outside the specified width and height
border-box	The specified width and height (and min/max properties) on this element determine the border box of the element. That is, any padding or border specified on the element is laid out and drawn inside this specified width and height. The content width and height are calculated by subtracting the border and padding widths of the respective sides from the specified ‘width’ and ‘height’ properties

How does it look

Demo

A quick demo of width problem is located here

http://jaspreetchahal.org/examples/css-examples/textarea-width-100.html

Final word

As you see that you can end up correcting the width to 100%. If you try to do it with box height the result will be the same as what we saw with the width. Good thing is that pretty much all modern browsers support this behaviour.

You can read more about box-sizing property here

http://www.w3schools.com/cssref/css3_pr_box-sizing.asp

I hope that this could be helpful to you

Cheers