How to determine why floated elements are affecting the heights of non-floated elements (D7 views blocks with zen theme)?

I'm updating a site built on D7 with a 7.x-56 zen sub theme. The theme is laid out with responsive horizontally stacked content regions. I've created a custom blog content type, and three views blocks based on taxonomy, archive, and recent posts, but I'm having trouble with the layout of the individual blocks within the content region.

What I want is the three blog content filter blocks stacked and floating to the right, while the blog itself is floated left. I've more or less pull this off, but floating and clearing the blocks to stack on top of each other, but the issue I'm having is that they are somehow influencing the height of the first blog post. So, why are the floated elements influencing the views row's height and how can I fix this? You can see a live version of the site hereenter link description here. For context, page is a view constructed from a custom content type, and the filter views are placed using the context module with equal row height of -9. Should I add a sidebar region here? or is there a css fix for this?

I would give the main blog area a width % and then float it to the left. For the stacked divs on the right, I would put all of them in one div, float that div to the right, and then give that div a width %.

Then make sure to set the div that contains both of these divs to "overflow:auto";

#main {
  overflow:auto;
}

#left {
  float:left;
  width:65%;
}

#right {
  float:right;
  width:30%;
}

<div id="main">
    <div id="left"></div>
    <div id="right">
        <div id="box-1"></div>
        <div id="box-2"></div>
        <div id="box-3"></div>
    </div>
</div>