Question

I am beyond frustrated. I have been researching an answer to this for hours and to no avail.
Yes, I know there is already a discussion about this here: IE7 float right causes parent element to take up full width

but it doesn’t seem to solve my issue. 🙁

I have 2 floats (a left and right) within a right floated element. Of course in every browser it works except IE7. The parent right floated element stretches to full width instead of wrapping around the 2 floats within.

I have tried zoom:1 on the parent element.
I have tried display: inline-block on the parent element.
I have tried min-width: 1px on the parent element.

NONE of which work! I have tried them altogether as well as separately and still no change in IE7. What am I doing wrong???

<div class="parentfloat">
    <div class="leftblock">
        LEFT FLOAT 
    </div>
    <div class="rightblock">
        RIGHT FLOAT            
    </div>
</div>

.parentfloat {
    float: right;
    display: inline-block;
    zoom: 1;
    min-width: 1px;}

.leftblock {
    float: left; 
    text-align: left; 
    margin-right: 60px;
    padding: 0;}

.rightblock {
    float: right; 
    text-align: right; 
    padding: 0;}

Answer 1

By not setting an explicit width for the .parentfloat containing element, it is by default (in IE7) expanding to take up 100% of the width. The fix for this is defining an explicit width for your .parentfloat class.

See this jsfiddle for an example (I added background-colors for clarity).

EDIT:
Considering this is an IE7 specific bug, I would recommend only apply the fixed width to IE7 either through the use of a conditional stylesheet, a css hack, or a conditional class.