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" ] [crayon-60027c6546810835970946/] [crayon-60027c6546818718478831/] 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 [crayon-60027c654681a468184228/]   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" ]   [crayon-60027c654681b742810756/] 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. … [Read more...]