How to expand textarea width to 100 of parent or how to expand any HTML element to 100 of parent width

Question

How to expand textarea width to 100  of parent   I try width 100  but it is not works it expands to 100  of page what crash layout   Here the question in visual way    Please provide some hints

User · Answer

I would do something like this   HTML    lt div class  wrapper  gt       lt div class  side  gt sidebar here lt  div gt       lt div class  main  gt           lt textarea class  taclass  gt  lt  textarea gt       lt  div gt   lt  div gt  lt  --  wrapper -- gt    CSS    wrapper      display  block      width  100       overflow  hidden     side      float left      width 20      main      float right      width 80      taclass      display block      width 100       padding 2       -webkit-box-sizing  border-box         -moz-box-sizing  border-box              box-sizing  border-box

User · Answer

You need to define width of the div containing the textarea and when you declare textarea  you can then set  main  gt  textarea to have width  inherit   Note   main  gt  textarea means a  lt textarea gt  inside of an element with class  main    Here is the working solution  The HTML    lt div class  wrapper  gt     lt div class  left  gt left lt  div gt     lt div class  main  gt       lt textarea name    cols    rows    gt  lt  textarea gt     lt  div gt   lt  div gt    The CSS    wrapper     display  table    width  100       left     width  20     background   cccccc    display  table-cell      main     width  80     background  gray    display  inline      main  gt  textarea     width  inherit

User · Answer

Try this  Add this in your page   lt style gt  textarea   width 100      lt  style gt

User · Answer

x000D   x000D   lt div gt  x000D     lt div style  width  20   float  left   gt  x000D       lt p gt Some Contentsssssssssss lt  p gt  x000D     lt  div gt  x000D     lt div style  float  left  width  80    gt  x000D       lt textarea style  width  100   max-width  100    gt  lt  textarea gt  x000D     lt  div gt  x000D     lt div style  clear  both   gt  lt  div gt  x000D   lt  div gt  x000D   x000D    x000D   x000D   x000D

User · Answer

Add the css     lt style type  text css  gt      textarea                border 1px solid  999999         width 99           margin 5px 0          padding 1          lt  style gt

User · Answer

The box model is something every web-developer should know about  working with percents for sizes and pixels for padding margin just doesn t work  There always is a resolution at which it doesn t look good  e g  giving a width of 90  and a padding margin of 10px in a div with a width of under 100px    Check this out  using micro pravi s code   http   jsbin com umeduh 2   lt div id  container  gt       lt div class  left  gt           lt div class  content  gt              left          lt  div gt       lt  div gt       lt div class  right  gt           lt div class  content  gt              right              lt textarea gt Check me out  lt  textarea gt           lt  div gt       lt  div gt   lt  div gt    The  lt div class  content  gt  are there so you can use padding and margin without screwing up the floats   this is the most important part of the CSS   textarea       display  block      width  100       -webkit-box-sizing  border-box         -moz-box-sizing  border-box              box-sizing  border-box

User · Answer

HTML    lt div id  left  gt  lt  div gt   lt div id  content  gt           lt textarea cols  2  rows  10  id  rules  gt  lt  textarea gt   lt  div gt    CSS   body      width 100       border 1px solid black      border-radius 5px      left      width 20   height 400px      float left      border  1px solid black      display block     content      width 78       height 400px      float left      border 1px solid black      text-align center    textarea      margin-top 100px      width 98       DEMO  HERE

[html] How to expand textarea width to 100% of parent (or how to expand any HTML element to 100% of parent width)?

Examples related to html

Examples related to css