The problem is that you have floated multiple article elements to the right and then you expect the last bit of static text to wrap all the way up to the top of all the floats but IE7 and under will only wrap the text in line with the very last float.
That is a bad design flaw anyway and you should float two columns only. One for the left content and one for the right content and then statically contain the content inside each. This will be more robust and work cross browser.
Just throw a div around those article sections and float it right with the correct width. The float the sidebar to the right with no margins and it will all line up nicely. Never use negative top margins to line things up when you have fluid content as that is a recipe for disaster and only works for the single case you see and indeed will be misplaced n all browsers due to the way that fluid content wraps and fits differently depending on browser.
That's a massive amount of code for such a small effect though but I guess you are bound by wordpress although I see no need for all the html5 bloat.
The clear:right that Victor suggests will fix the problem but is basically using another IE bug to squash an IE bug and the best way to go is still to create two floated columns as mentioned already.