I have had the following problem for a while and I am really not sure how to solve it.

The problem can currently be observed here: http://www.androidpolice.com/2009/11/16/the-not-so-good-the-bad-and-the-ugly-my-list-of-20-problems-with-htc-hero/ - feel free to use this for Firebugging.

There are 2 notions here: a table of contents (toc) and notes. A note usually takes 100% of the post width and everything is fine.

However, when a note appears next to a toc, the toc starts overlapping and covering the note (I set z-index:1 on the toc because otherwise the note covered it, which was even worse).

It's interesting to point out that the text of the note doesn't get covered by the toc - only the note div itself does.

In IE7, it's even worse - the note div jumps down to under the toc and leaves a lot of empty space (2nd screenshot).

So, how can I solve this? The ideal solution would have the note div occupy 100% of the visible space - i.e. it would resize itself to fit right next to the toc when needed.

Any points appreciated. Thank you!

Here are some screenshots for future reference:

in IE7: