CSS: How is height of block-elements calculated? -

i use div-element holds comments. use jquery add more comments so:

$(mydiv).append(  '<li>'  + '<img width="32px" height="32px" src="mysource"/></a>'  + '<p>' + mycomment + '</p>'  + '</li>' ); 

the problem is, seems height of whole div doesnt updated properly! height of div increases while add more comments, not enough, after comments tends overflow.

how height of element calculated?

regarding general question of "how height of element calculated", info can found here: http://www.w3.org/tr/css2/visudet.html#computing_heights_and_margins

as can see, it's bit complicated.

some excerpts:

block-level non-replaced elements in normal flow when 'overflow' computes 'visible'

section applies block-level non-replaced elements in normal flow when 'overflow' not compute 'visible' has been propagated viewport.

[. . .]

if 'height' 'auto', height depends on whether element has block-level children , whether has padding or borders:

if has inline-level children, height distance between top of topmost line box , bottom of bottommost line box.

if has block-level children, height distance between top border-edge of topmost block-level child box not have margins collapsed through , bottom border-edge of bottommost block-level child box not have margins collapsed through it.

[. . . ]

children in normal flow taken account (i.e., floating boxes , absolutely positioned boxes ignored, , relatively positioned boxes considered without offset).

[. . . ]

block-level, non-replaced elements in normal flow when 'overflow' not compute 'visible' (except if 'overflow' property's value has been propagated viewport).

if 'height' 'auto', the height depends on element's descendants.