CODEWITHSUNDEEP
htmlcss
The Bolt
The Bolt

Reputation: 121

Resizing div according to the textarea

I created a div to create this input area, however, it's evident that this div will run across the whole page. Whenever I try to style, say add a border under the legend, the border runs across the full page. What I want is to restrict the width of the div to the textarea box, so that even the border runs across only from the start of the textarea to the end of the textarea.

Upvotes: 1

Views: 2797

Answers (2)

Michael Coker
Michael Coker

Reputation: 53664

By default, a block element will grow to occupy the available inner width of it's parent. To have it shrink down to the size of it's largest child, use display: inline-block instead.

div {
  border: 1px solid red;
  display: inline-block;
}
<div id="input_area">
    <fieldset>
        <legend>Input Text</legend>
        <textarea rows="10" cols="80"></textarea>
    </fieldset>
</div>

Upvotes: 3

Adrianopolis
Adrianopolis

Reputation: 1292

you can put a wrapper around it assuming you wanted it on its own line:

<div>
  <div id="input_area">
    <fieldset>
      <legend>Input Text</legend>
      <textarea rows="10" cols="80"></textarea>
    </fieldset>
  </div>
</div>

and then with your css change your input area to an inline block.

#input_area {display: inline-block;}

Upvotes: 1

Related Questions