CSS - How to prevent the DIV without content from shrinking

Question

I have the following code:

  <div id="sub-title-div">
  Hello world
  </div>

  #sub-title-div {
    background: #FFE640;
    position: relative;
    top: 0px;
    left: 30px;
    width: 901px;
    height: 137px;
    line-height: 13px;
  }

I found that if I remove the 'Hello World', the #sub-title-div will shrink and become invisible. Is there an easy method that I can do this more elegantly?

Thank you

Answer 1

If you don't need to support IE6, you can use the min-height property.

#sub-title-div {
    min-height: 137px;
}

Answer 2

put   when you want to remove text, then div will maintain its height