Wrong float warping in IE7

Question

Hello,
here's test page, which looks differently in IE7, while OK in Firefox & Opera.
Looks like FF & Oprah are adequate about

.twoColLiqRtHdr #mainContent {
     margin: 0 20px 0 10px;
}

right margin and place text accordingly (text fills space under sidebar), while IE uses #sidebar's left border as margin, and, as a result, that space is not used.
Edit: here's what it's all about described in nice picture: link.
Please, help me fix it.

Answer 1

Have you tried adjusting the #sidebar1's margin to 0, especially at bottom? Or floating it left instead of right? See, I'm not a crack in CSS-hacking for IE but probably this will enable you to see were the error is coming from. Probably use my all-time favorite css-hack when it comes to IE7, sometimes it does wonders to me:

* html div {
 margin: 0;
 padding: 0;
}

Answer 2

Remove the zoom: 1 from the #mainContent.

I know you added that to work around IE bugs in the first place, but you're going to have to find another way to do that if you also want the main content to wrap around the float. Perhaps you can add it to select elements inside the main content.

See the paragraph titled "Elements next to floats" in the famous article "On having layout".