Fixing the TOC issues

Hi everyone,

As you might have noticed there are several issues with the TOC pushing down content with clear:both; or content overlapping it (e.g. flags). Yesterday I tried to solve those issues, by moving the TOC outside the content div (but inside the content area) and making it scroll on the free space to the right of the content, as the page is scrolled. Doug suggested I move it outside the content area entirely, so I made a quick mockup which you can find here [1]. It’s not perfect but it should give you a rough idea of how it will look.
The issue with that is that it requires a pretty large resolution so we would have to move it in the content area for resolutions < 1440px wide anyway. Also, I don't like the contrast of the dot with the background colors, but this could perhaps be fixed, maybe by tweaking its design a bit. The problem with my original approach is that it makes the content narrower.

Thoughts? Do you prefer this idea or do you think the TOC inside the content area would work better? 

[1]: http://docs.webplatform.org/test/css/properties/border-radius

Lea Verou
W3C developer relations
http://w3.org/people/all#lea ✿ http://lea.verou.me ✿ @leaverou