2 Columns, Content First, Floats with Clearing Footer

A brilliant solution in that it uses two innovative techniques combines. First, it uses negative margins on floats. From the article and my reading elsewhere I still don't fully understand the intricacies of floats, especially when it comes to things like their treatment of margins. But it works. Second, it uses nesting rather than wrapping to solve a problem. Most CSS layout solutions involve wrapping two elements within a container, but this solution pulls from an old school table layout set of tools, and nests a copy div within a container.

The only difficulty I had with the article actually was the naming of a div id, and I think came from the way the article was written, by reverse engineering the solution rather than guiding the reader through it. My problem started with the original HTML code example. The main text was wrapped in a div called "container". This is a name usually reserved for divs that hold within them other divs, making the structure of the page. My question was, why isn't it div id="content" or "copy". My question was answered with the solution to the overlapping text problem in example two. We needed another div inside "container" called "copy", to give the text a right margin. Now, the way he explained it did involve less code changing than starting out with a "copy" div and wrapping a "container" div around it, and shifting the CSS around, but personally I find following the complete path to the solution of a problem just as important as learning the answer. By messing with the solution process by basing the initial example on knowledge gained later in the solution it makes following along more difficult.