Push page content below left-floated div

Question

Some pages of a site I am working on use a script to automatically create a table of contents based on a page's headers. However, I'm having a bit of an issue getting the "toc" div to push the rest of the page's content below it.

The TOC div is within the innermost div on my page, "content". For this reason, I haven't been able to force my content div below the TOC with clear: both; as would be usual. I don't want to move it outside "content" because I want the TOC to be below the page's H1 header, and I want to avoid <div></div> spam as much as possible.

Below is a jsfiddle with a simple layout showing what I mean. Note that the TOC has a background color. If I make its width 100%, it works, but the color stretches, which is not what I want.

http://jsfiddle.net/n3yKf/2/

I will probably be changing the script that generates the TOC as I'm not overly fond of the script using <a> titles. However, my issue is with CSS so I don't think I'll get too much into that right now.

Suggestions on good ways to create a better script are welcome (hopefully with source code; I hate black box solutions) all the same though.

Answer 1

So why not just get rid of the float: left ? Why are you floating it if you want all the other content to display below? Just get rid of float and throw a width on it.

#toc {
    background: #999;
    border: 1px solid black;
    padding: 0 1em 1em;
    width: 45%;
}

Answer 2

there a re couple of things you can do

you can add the same class to each of your h2 tags and then apply the clear both to that class in the css;

h2 {
    clear:both;
}

also you could wrap your content in a separate div and then apply the clear both to that div

also i modified your jsfiddle to iterate the jQuery each with a variable so you only have to append() one time by concatenating all the anchor tags.

http://jsfiddle.net/n3yKf/5/