CODEWITHSUNDEEP
htmlcsswidthtextarea
Alluziion
Alluziion

Reputation: 181

Why does Textarea width and DIV width behave so differently?

I have a series of div boxes followed by a textarea with the same class to adopt the same styling but I've noticed that the div seems to automatically fill the horizontal width of the parent whilst the textarea doesn't. Giving the textarea width:100% solves the problem but then if I give the shared class margin-left:80px, the textarea exceeds the parent whilst the div boxes do not.

I'm simply wondering why this behaviour occurs and if it can be replicated with the textarea. The cleanest solution I have so far is giving the textarea width:calc(100%-80px) but would prefer a more 'natural' solution.

Here's some example code:-

HTML

<body>

    <div class="container">

        <div class="box">
        DIV
        </div>

        <div class="box">
        DIV
        </div>

        <form>
            <textarea class="box">TEXTAREA</textarea>
        </form>

    </div>

</body>

CSS

.container {
  background: #bbb;
  padding: 30px;
  box-sizing: border-box;
}

.box {
  height: 80px;
  background: #888;
  box-sizing: border-box;
  margin: 0 0 50px 80px
}

textarea {
   width: calc(100% - 80px); // CLEANISH SOLUTION
}

Here's a JSFiddle: https://jsfiddle.net/tndm2eqz/1/

Upvotes: 2

Views: 574

Answers (5)

Nahuel Alfaro
Nahuel Alfaro

Reputation: 1

Probably you've found a solution, but I'm going to add a solution that it fit with my case.

I had a textarea inside a div and I wanted to set height for the textarea like usually I set it for divs, and I noticed adding a box-sizing:content-box in the textarea style works making the textarea behavior similar to a div.

Hope someone can find this answer useful.

Thank you

Upvotes: 0

Gopi Chand
Gopi Chand

Reputation: 174

    .container {
  background: #bbb;
  padding: 30px;
  box-sizing: border-box;
  width:100%;
  margin:0px;
}

.box {
  height: 80px;
  background: #888;
  box-sizing: border-box;
  margin: 0 0 50px 0;
  width:100%;
}
 <body>
  
  <div class="container">
    <div class="box">
    DIV
    </div>

    <div class="box">
    DIV
    </div>

    <form>
      <textarea class="box" rows="10">TEXTAREA</textarea>
    </form>

  </div>

</body>

Upvotes: 0

Ismail Farooq
Ismail Farooq

Reputation: 6827

textarea is not display:block by default u have to add display:block and width:100%; to your textarea so, why don't you take textarea inside .box div and make textarea width:100% with block. For example 

.container {
  background: #bbb;
  padding: 30px;
  box-sizing: border-box;
}

.box,.box textarea  {
  height: 80px;
  background: #888;
  box-sizing: border-box;
}
.box{
  margin: 0 0 50px 80px;

}
.box textarea {
  display: block;
  width: 100%;
}
<div class="container">
    <div class="box"> DIV </div>
    <div class="box"> DIV </div>
    <form>
        <div class="box">
            <textarea>TEXTAREA</textarea>
        </div>
    </form>
</div>

Upvotes: 0

begoyan
begoyan

Reputation: 424

The div displaying type is block unlike textarea. If you want the textarea to behave as div, add this:

textarea{
    display: block;
}

And don't forget about textarea's borders and shadows.

Upvotes: 0

G-Cyrillus
G-Cyrillus

Reputation: 105893

it does apply CSS given, but <form> is in between so width is not inherited prperly : https://jsfiddle.net/tndm2eqz/3/

.container {
  background: #bbb;
  padding: 30px;
  box-sizing: border-box;
}

.box {
  height: 80px;
  background: #888;
  box-sizing: border-box;
  margin: 0 0 50px 80px;
}

form {
  margin: 0 0 50px 80px;
  padding: 0;
}

textarea.box {
  width: 100%;
  display: block;
  margin:0;
  box-sizing: border-box;
}
<body>

  <div class="container">

    <div class="box">
      DIV
    </div>

    <div class="box">
      DIV
    </div>

    <form>
      <textarea class="box">TEXTAREA</textarea>
    </form>

  </div>

</body>

Upvotes: 2

Related Questions