How to fix floated elements extending height of non-floated elements within a single zen theme region?

Question

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 here live site. Should I add a sidebar region here? or is there a css fix for this? 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.

Answer 1

So, the simplest approach ended up being adding another region to the theme. I made sure to add the region within the content region div to facilitate alignment, this gave me a container to float the block divs altogether with the clear: both declarations messing with the internal layout of the content region.