-4

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!

FlyingCat
  • 14,036
  • 36
  • 119
  • 198
  • You are using floats and that is messing your parent element height.. for more info http://stackoverflow.com/questions/16568272/how-css-float-works-why-height-of-the-container-element-doesnt-increase-if-it/16568504#16568504 – Mr. Alien Dec 04 '13 at 18:58
  • You could set `overflow: hidden` on the parent div after getting rid of it's set height, it will then adjust to the height of it's floated children. – Kevin B Dec 04 '13 at 19:18

1 Answers1

2

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

text-container{
    margin:18px;
    min-height:120px;
}
scrblnrd3
  • 7,228
  • 9
  • 33
  • 64