0

I have the following simple markup:

<div id="container">
    <textarea id="content" />
</div>

I need to set the min-width of the div is large enough to wrap the entire textarea when we start to re-sizing the textarea. How can I do that? I hope this is a very typicall problem but I just haven't come across that. JS or pure CSS?

user3663882
  • 6,957
  • 10
  • 51
  • 92

2 Answers2

2

You only need to set float:left on the div:

#container {
  padding: 10px;
  float: left;
}

jsfiddle

jcubic
  • 61,973
  • 54
  • 229
  • 402
  • Real magic, thank you. Couldn't you explain why floating left make it working? I really don't understand. – user3663882 Apr 04 '15 at 11:53
  • 1
    Float left is 'trick' here more than real solution. Please read this: http://stackoverflow.com/questions/11805352/floatleft-vs-displayinline-vs-displayinline-block-vs-displaytable-cell – UgaBeluga Apr 04 '15 at 12:01
  • @DženanKlapuh Maybe you 're right. But would you mind explaining your solution then. I checked it and it worked. – user3663882 Apr 04 '15 at 12:03
  • @user3663882 In css one element always fill the surrounding element but when you create div the width is always 100%. If you set `float: left` the same as `display:inline` the element will shrink and be the size of the thing that's inside. – jcubic Apr 04 '15 at 12:04
  • 1
    Every element or wrapper that doesn't have exact size ( width or height ) should have display set to inline or inline block. Otherwise that element will have 0px height/width. If you set display: inline-block ( in this case ) container will stretch as the content stretch. This apply to anything from pure text to forms. If you set that your container is 100% width and haven't specified height. Your content of the container will stretch in height but your container won't follow it because none of the display properties are not set - In other words it will be 0 in height. – UgaBeluga Apr 04 '15 at 12:09
1

Actually what you have to do is to set min-width to textarea element and to set container to have inline-block property 

#container{
    display: inline-block;
}

#container textarea {
    min-width: 300px;
}
UgaBeluga
  • 132
  • 6