CSS: How is height of block-elements calculated?

I use a div-Element that holds some comments. I basically use jQuery to add more Comments like so:

$(myDiv).append(
 '<li>'
 + '<img width="32px" height="32px" src="mySource"/></a>'
 + '<p>' + myComment + '</p>开发者_C百科;'
 + '</li>'
);

The problem is, that it seems that the height of the whole div doesnt get updated properly! The height of the div increases while I add more comments, but not enough, so after some comments it tends to overflow.

How is the height of an element actually calculated?

Regarding the general question of "How is the height of an element calculated", some info can be found here: http://www.w3.org/TR/CSS2/visudet.html#Computing_heights_and_margins

As you can see, it's a bit complicated.

Some excerpts:

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

This section also applies to block-level non-replaced elements in normal flow when 'overflow' does not compute to 'visible' but has been propagated to the viewport.

[. . .]

If 'height' is 'auto', the height depends on whether the element has any block-level children and whether it has padding or borders:

If it only has inline-level children, the height is the distance between the top of the topmost line box and the bottom of the bottommost line box.

If it has block-level children, the height is the distance between the top border-edge of the topmost block-level child box that does not have margins collapsed through it and the bottom border-edge of the bottommost block-level child box that does not have margins collapsed through it.

[. . . ]

Only children in the normal flow are taken into account (i.e., floating boxes and absolutely positioned boxes are ignored, and relatively positioned boxes are considered without their offset).

[. . . ]

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

If 'height' is 'auto', the height depends on the element's descendants.

Is this happening in all browsers or just one? Height calculations differ subtly between browsers.

The first thing I look at when the page isn't rendering like I should is whether the HTML is valid. In your code, you have a closing </a> tag with no opening one. This type of mismatch is enough to throw several browsers off.

It's happened to me several times where the navigation buttons seem to be in a very different location all because somewhere in my content I forgot to close a <div> or I added an extra closing element somewhere.

Are you appending to a DIV or a UL? It should be a UL

Try this CSS

li{clear:both}