Problem of CSS float in IE

IE defined a no standard CSS attribute word-wrap, when it is set to 'break-word', IE divids a long word if it is too long. If it is set to 'normal', the word won't be divided.
An example is list below:

testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttest

You can see the different render results in IE and firefox, firefox ignore this attribute and the whole word is in the same line. Both are OK for me.

The problem is, if IE does not divid the word, the right panel in my blogger pages will move down below the left panel, make them cannot appear in the same row. What a pity, and it is the reason of why many blogger's template layout will be corrupted in IE, if there is a long hyperlink (or dir name, or tag, etc.), where IE does not divid the word inside.

In my situation, I want the float left panel does not extend automatically with contents inside, and treat IE's method as a bug for me. But in certain situations, sb. may feel firefox's method is a bug, here is an example.

Fortunately, now, we can combine the word-wrap attribute and tips from http://www.positioniseverything.net/easyclearing.html to solve the problem you meet, although it cannot solve problem for all ppls. How to choose is up2u.