It may be challenging to achieve that, depending on the specifics of what you're trying to accomplish.
The issue with this not working is due to IE6's unique property called "hasLayout." In IE6, any element with "layout" will contain its floated elements. This layout is triggered by CSS properties like width or height. More information can be found in the linked article.
For further discussion on this problem, refer to the "acidic float tests" page.
If you remove the width and height from the center div, you'll notice that it no longer contains the float as it no longer has layout.
However, altering the structure may lead to undesired results. To address the width issue, consider adding a wrapper div around both rows with the desired width set on it. For fixed height, you could introduce an additional div inside each row (as a sibling of the blue box in the first row) and set the height there instead.
In a more complex design scenario, it might still be necessary to add certain properties to the rows to trigger layout, making this solution incomplete.
Below is the modified HTML code without the width and height attributes for the center class. The original structure is maintained with inline CSS showcasing the adjustments:
<div style="width: 800px">
<div id="row1">
<div class="center">
<div id="box">
Lorem ipsum ...
</div>
<div style="height: 100px">
Duis autem ...
</div>
</div>
<div id="row2">
<div class="center" style="height: 100px">
Duis autem ...
</div>
</div>
</div>