Dynamic height for DIV

Question

I have the following DIV

<div id="products">  </div>  #products {     height: 102px; width: 84%;     padding:5px; margin-bottom:8px;     border: 1px solid #EFEFEF; } 

Now inside the DIV, I am dynamically generating 4 links. But sometimes there could be more or less than 4 links. How can I change the CSS to dynamically resize the DIV according to its contents?

Answer 1

set height: auto; If you want to have minimum height to x then you can write

height:auto; min-height:30px; height:auto !important;        /* for IE as it does not support min-height */ height:30px;                   /* for IE as it does not support min-height */ 

Answer 2

calculate the height of each link no do this

document.getElementById("products").style.height= height_of_each_link* no_of_link