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. enter image description here

Please provide some hints.

You must show your code. I suspect it has something to do with positioning on the parent element and so there is no reference point for the text area. But I can't tell you for sure without _seeing some code_! — Kyle, Jun 20 '13 at 09:21
Width does not include paddings and margins. If you want to make a box 100% you can set `width: auto;` for blocks, otherwise you should calculate the width by substracting the margin and padding. check out more information about to box model: http://www.w3.org/TR/CSS2/box.html — Broxzier, Jun 20 '13 at 09:25
Apart from the code, can you indicate please what browser support you want? — Arkana, Jun 20 '13 at 10:08

score 94 · Accepted Answer · edited Jun 10 '20 at 15:53

94

<div>
  <div style="width: 20%; float: left;">
    <p>Some Contentsssssssssss</p>
  </div>
  <div style="float: left; width: 80%;">
    <textarea style="width: 100%; max-width: 100%;"></textarea>
  </div>
  <div style="clear: both;"></div>
</div>

edited Jun 10 '20 at 15:53

Mario Petrovic

7,500
14
42
62

answered Jun 20 '13 at 09:43

Gangadhar

1,739
15
19

Why does it work? i.e. why wrapping with a div and setting some properties work in terms of CSS fundamentals? – Elton Lin Aug 16 '22 at 20:14

score 16 · Answer 2 · answered Jun 20 '13 at 09:39

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

<div id="container">
    <div class="left">
        <div class="content">
            left
        </div>
    </div>
    <div class="right">
        <div class="content">
            right
            <textarea>Check me out!</textarea>
        </div>
    </div>
</div>

The <div class="content"> 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;
}

Almost good (missed floating). box-sizing == CSS3 better use old CSS2 if you not want limit you application by design. — Chameleon, Jun 20 '13 at 16:28
to be honest, this should be the answer, 100% width is correct. What's incorrect is how the browser calculates it. — windmaomao, Jan 26 '21 at 17:51
`box-sizing: border-box` was the one thing that finally solved my particular use case. — Arbo, Dec 30 '22 at 04:36

score 10 · Answer 3 · edited Dec 19 '15 at 16:51

10

You need to define width of the div containing the textarea and when you declare textarea, you can then set .main > textarea to have width: inherit.

Note: .main > textarea means a <textarea> inside of an element with class="main".

Here is the working solution

The HTML:

<div class="wrapper">
  <div class="left">left</div>
  <div class="main">
    <textarea name="" cols="" rows=""></textarea>
  </div>
</div>

The CSS:

.wrapper {
  display: table;
  width: 100%;
}

.left {
  width: 20%;
  background: #cccccc;
  display: table-cell;
}

.main {
  width: 80%;
  background: gray;
  display: inline;
}

.main > textarea {
  width: inherit;
}

edited Dec 19 '15 at 16:51

Jase

1,369
2
12
24

answered Jun 20 '13 at 09:28

Nitesh

15,425
4
48
60

Try not condense code - it makes it less readable what is the most important in coding - not compression. Pretty indentation is not to keep code beauty but only code quality and readability. Readable code can be faster reviewed and has less errors (2x 4x times). – Chameleon Jun 22 '13 at 07:44

score 2 · Answer 4 · answered Jun 20 '13 at 09:34

HTML:

<div id="left"></div>
<div id="content">
        <textarea cols="2" rows="10" id="rules"></textarea>
</div>

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

is it height: auto not default value in css - http://www.w3.org/wiki/CSS/Properties/height ? Clear is need here. — Chameleon, Jun 22 '13 at 07:39

score 0 · Answer 5 · answered Jun 20 '13 at 09:23

0

Try this..Add this in your page

<style>
textarea
{
width:100%;
}
</style>

answered Jun 20 '13 at 09:23

Ganesh Rengarajan

2,006
13
26

1

Wrong idea it is global settings never do it. – Chameleon Jun 20 '13 at 16:10
this one is a basic logic,you create style with specific name and then apply to the specific textarea.. – Ganesh Rengarajan Jun 21 '13 at 03:51

score 0 · Answer 6 · answered Jun 20 '13 at 09:24

0

Add the css

  <style type="text/css">
    textarea
    {

        border:1px solid #999999
        width:99%;
        margin:5px 0;
        padding:1%;
    }
</style>

answered Jun 20 '13 at 09:24

newuser

8,338
2
25
33

1% = unknown - it is not responsible layout can or not work use better em. – Chameleon Jun 20 '13 at 16:22
@Chameleon Thanks for your Recommendation – newuser Jun 21 '13 at 01:19
I think it will save a lot of time on mobile devices. – Chameleon Jun 22 '13 at 07:38

Qiqi Abaziz · Answer 7 · 2013-06-27T03:33:27.790

0

I would do something like this:

HTML:

<div class="wrapper">
    <div class="side">sidebar here</div>
    <div class="main">
        <textarea class="taclass"></textarea>
    </div>
</div><!--/ wrapper -->

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;
}

edited Jun 27 '13 at 03:33

answered Jun 20 '13 at 09:25

Qiqi Abaziz

3,363
3
16
12

The point is to inherit the width and not declare a width in value. By declaring a value, you are manually solving the purpose, which instead should be solved by a strategic CSS Solution. – Nitesh Jun 20 '13 at 09:30
I saw your method above but in fact that the wrapper is not fully in 100% width? – Qiqi Abaziz Jun 20 '13 at 09:41
That is because I have not defined a `table-cell` for the second div. – Nitesh Jun 20 '13 at 09:47
Percent is not ok since it is not relative - it is ok for 20%, 80% and for nothing else. – Chameleon Jun 20 '13 at 16:21
If you wish 95% something you can make container with padding: 1em; (not %!). – Chameleon Jun 20 '13 at 16:32
Don't add markup to do clearing, this isn't semantic! Use a clearfix instead. – Soviut Jun 20 '13 at 16:42
@Soviut: that one was added by someone, not me. I have edited the code above for clearing floats – Qiqi Abaziz Jun 27 '13 at 03:31

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

7 Answers7