Multi-language style container content is out of parent width without wrapping

A classic left and right floating layout;

<class= "wrap">    <class= " Left "></div>    <class = "Right" ></ Div > </ Div >

Wrap layer width is 1000px;

In the English layout, left and right to calculate the width or not to the width, no problem, but the project introduced a multi-lingual translation, when the words in Russian, French, Italian, the word is longer, there will appear in the right layer plus the total width of the layers above the wrap layer situation, Then the right layer will have skip bug;

Boss Hope is not to change line, after testing, found such a strange layout way:

Wrap layer width 1000px unchanged;

Left layer floating;

Right layer does not float, to align, the child element does not give width, with Inline-block + IE hack compatible with IE, add no line code: WHITE-SPACE:NOWRAP;

After this layout, the left layer + right layer total width exceeds the width of the wrap layer, then the content will be pushed out, outside of wrap, continue to display the line;

Right layer CSS:

. Right { color:#ffffff; line-height:38px; text-align: right; white-space: nowrap;}

Multi-language style container content is outside the parent width without wrapping