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 change the mouse pointer?

    How to break a table with CSS diagonally or vertically?

    Rails 4 -how to write a view that displays instances in alternating format

    How remove striped rows in JavaFX 8 TableView

    How to give a matte-finish (non-glassy) look to an image with CSS?

    Draggable elements in div show up behind drop zone when div is scrollable, need them to show in front

    how can i center the text inside my css div circle

    How do I prevent the element of an HTML5 form from moving slightly?

    Every third post excerpt shows up on its own line

    How can I make my CSS update consistently? [closed]

    how to nest css boxes with relative positioning and absolute positioning

    How to slide a div out

    How to set control properties in css?

    How to expand a div with css

    How to vertical center ordered list-navigation

    CSS how to show menu sub li when menu has position fixed

    How to make the div at the screen center not lower right corner?

    How to close popup

    How to use very large font sizes in Internet Explorer with CSS that won't affect design?

    How to dynamically create a css style rule that is overridable by earlier rules

    How to property adjust table?

    How to print javascript within HTML id tag

    how to apply css class condtionally in angularjs

    How to add checkmarks and x's when validating in angularjs?

    Toggle radio button on javascript hide/show of div

    How to design a web page with multiple color panes without tables [duplicate]

    CSS positioning: how to make it relative to one element but not the other?

    How to make css transform-origin property work in IE7 and IE8?

    How can I add a coloured square in front of several list items?

    How to animate a ball travelling pre-defined paths in HTML5, Javascript and CSS?