Fancy comment blocks CSS implementation
===

The goal is to accomplish this:

![enter image description here][1]


  [1]: http://i.stack.imgur.com/G5zL8.jpg

I already know how to crop my images, but that's really the easy part. I have a rough idea for the top (short comment) implementation regarding overlapping the image on a rounded block, adding some left padding and a negative left margin with overflow hidden and voila. However, that does work if the content expands, and since these are comment blocks, they will expand.

1) The dashed boxes represent the areas where content will be displayed. The bottom image (long comment) shows the content filling the extra space below the image, similar to how float would work. However, if this is too hard to implement, I can accept a straight rectangular shape for content and just empty space under the image.

2) The boxes are expandable both in width and height to a min-width/min-height of 150px/90px.

3) I don't care if they appear as 90 degree angles in IE because of border-radius. That's how IE displays the rest of my site using border-radius (except 9).

4) I can accept jQuery as well. Currently I'm using 1.7.2 and my site is pretty light on it so I don't mind adding some more scripts.