For the longest time I have been perplexed by the issue of an html div tag and its children being affected by a float present in the grandparent element. The behavior I was seeing was that whenever I would float any element inside of my div, it would be pushed down to below the floated elements in the grandparent element. This was definitely not desired, as it made the vertical location of the new floated element unpredictable. Researching this issue lead me to very few details on the topic.

In the end, going back to the W3c specifications gave me my answer. Specifically the section on Block Formatting was useful. It seems that what I really wanted was to set up a new block formatting context. To do so, I had to set the overflow property such as overflow:hidden;. Doing so set up a new context, and allowed my elements to float as desired., while ignoring the grandparent context.

As a strange and useful side effect, I was also able to remove the margin-right:200px; from my main column CSS, as apparently that part is handled just fine by the overflow:hidden;. Testing in Firefox and Chromium show that this works great and looks just fine. If someone wants to test it in another browser and let me know how bad I have broken my site, I'd appreciate it, :).