IE7错误-浮动：浮动的左子级：右父级

Question

I'm having a weird issue (ie7 only) where the left floated child of a right floated element is not being constrained to its parent's width and is instead going all the way to the far left of the parent's parent and stopping at the closest left floated div. You can refer to the following fiddle for example code. Looks fine in all other browsers, but unfortunately I have to support ie7.

Is there a way to fix this without setting an explicit width on the parent of the two floated sub-items and without changing the markup structure?

http://jsfiddle.net/s89XZ/

Code from the fiddle attached below:

    <style>
        .wrapper{
            position: relative;
            width: 500px;
            min-height: 18px;
            margin: 0 auto;
            padding: 14px 0;
            background-color: red;
        }
        .menu_L{
            color: #504A43;
            height: 18px;
            float: left;
            width: 100px;
            background-color: blue;
        }
        .menu_R_wrapper{
            float: right;
        }
        .menu_R{
            position: relative;
            float: right;
        }
        .menu_R .item_L,
        .menu_R .item_R{
            width: 50px;
            height: 18px;
        }
        .menu_R .item_L{
            float: left;
            background-color: orange;
        }
        .menu_R .item_R{
            float: right;
            background-color: green;
        }
    </style>
    <div class="wrapper">
        <div class="menu_L"></div>
        <div class="menu_R_wrapper">
            <div class="menu_R">
                <div class="item_L"></div>
                <div class="item_R"></div>
            </div>
        </div>
    </div>

Answer 1

You've to set width of floating parent in those lesser IE: please see http://jsfiddle.net/s89XZ/1/ where this width was added (it should be 100px here but 105px is better at showing that it works):

.menu_R {
    width: 105px;
}