tags:

views:

52

answers:

3

Hello all,

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

+1  A: 

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

#sub-title-div {
    min-height: 137px;
}
Dan Herbert
+1  A: 

It could be your doctype? It doesn't dissapear for me. See the sample page:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt;
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title></title>
    <style type="text/css">
      #sub-title-div {
        background: #FFE640;
        position: relative;
        top: 0px;
        left: 30px;
        width: 901px;
        height: 137px;
        line-height: 13px;
      } 
    </style>
</head>
<body>
    <div id="sub-title-div">
    </div>
</body>
</html>
Moin Zaman
Hello Moin, This is my DOCTYPE: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
q0987
+1  A: 

Use

min-width:901px;
min-height:137px;

if you want to have the DIV have the same dimensions even without content.

Octavian Damiean