How to adjust height of the div base on contents? [duplicate]


Tags: jquery,html,css

Problem :

This question already has an answer here:

I have something like the following

 <div class='texts-container'>
               <div class='texts-title'>Text title</div>
               <div class='texts'><p>some texts here. Dynamically generate.</p></div>
  </div>

CSS

.texts-container{
width: 650px;
height: 120px;
margin: 18px;
}

.texts-title{
   float: left;
   padding: 10px;
   background-color: #ECECEC;
   height: 80px;
   width: 130px;
   line-height: 80px;
   text-align: center;
   vertical-align: middle;
}

.texts{
   background-color: #E2E2E2;
   float: left;
   padding: 5px;
   height: 90px;
   width: 430px;
}

current:

  --------------------------
| siojfisojfosjfiosjfsif     |
|jfisofjiosfjjsfjifosfjoisjf |
  --------------------------
 kfosdfkpsdkfsfp fkopsf
 kopfkpsf fkopsfpsdk

Desired result

  ---------------------------
| siojfisojfosjfiosjfsif     |
|jfisofjiosfjjsfjifosfjoisjf |
| kfosdfkpsdkfsfp fko        |
| kopfkpsf fkopsfpsdk        |
  ---------------------------

My question is how to make my .texts div height automatically adjust if I have lots of texts in that div.

I don't want to set the height of the text div very high as most of my contents are short. However, I do want to adjust the height automatically when I have large amount of contents. Can anyone give me a hint? Thanks!



Solution :

Set a min-height, but not a height, like this:

text-container{
    margin:18px;
    min-height:120px;
}

    CSS Howto..

    how to make tab bar in jquery mobile?

    How to get a button to fill the full width of the footer in Mobile View?

    How to center a div in html & css, always keep the aspect ratio, and fill max screen width/height?

    How to change the mouse cursor over an embedded flash?

    How do I learn what changes my css values?

    How to disable inline CSS position attribute

    how to position radio button outside of a block with css

    CSS - How do I get my list element to fill 100% of the block

    How to define different css based on element changing number

    How do I put a box around my Flot graph?

    How to override global style for img tag in css

    Twitter boostrap and css: How to remove the modal overlay and refocus on the input box, so the users can type with the modal open

    How to replace css class value using angularjs values?

    How to show hidden div in the same line as the paragraph text?

    How do I keep my text on one line in Firefox?

    How to stop word-wrapping in a CSS Dropdown menu.

    PHP Header Include (nav bar) not showing up [closed]

    How to fix flexbox position:fixed navbar JS/CSS bug

    How to combine 2 SASS functions as they do almost the same thing just using a different calculation?

    How can I dynamically assign css line-height to nested objects using jQuery?

    How to apply pseudo-element styling to specific class only?

    How can I remove “border-top-width” css style?

    How to display image in sidebar-wrapper css class

    How to create a relative inline style?

    How to make a box expand a distance from the sides

    How can I get an image to always appear to the right of some associated text using HTML and/or CSS?

    How to bring DIV2 to top WRT DIV1?

    Ext JS 4.2 - How to create a header like the one at KitchenSink sample?

    How to pin the menu to the upper part of the screen?

    how to access image through div