Two divs with fluid content floating next to each other. IE 7 Not displaying the correct layout.

Question

The Case

I have two floating divs next to each other. Both have "fluid" contents and I want them to stay next to each other unless they touch. Then, I want them to be stacked.

The problem is that my fluid content (like text or a list) crumbles in IE 7 as soon as the two divs touch. On top of that, this only happens with some IE 7 versions, not all.

---

The Code

<div class="left-aligned">
    <p>This is some text of undetermined length.</p>
</div>
<div class="right-aligned">
    <p>This is some text of undetermined length as well.</p>
</div>

.left-aligned {
   float: left;
}

.right-aligned {
   float: right;
}

---

The Test

1. Case 1
2. Case 2

---

The Problem

So,apparently, this issue only happens with IE7 and appears to be random. Some people see the wrong layout, some the correct one. Anyone who can shed a light?

Answer 1

Unless I misunderstood, this is easily done by floating the 1st div to the left and 2nd div to the right.

Here is an example of Case 1.

Here is an example of Case 2.

I wrapped them in a <div> of fixed width in the example to more easily illustrate the behavior, but without it the same effect would happen just relative to the viewport.

Answer 2

Add css:

.left-aligned {
   float: left;
}

.right-aligned {
   float: right;
}

Unless I'm missing something, this should give you exactly the behaviour you are looking for.

Answer 3

The CSS2 specifications state "A floated box must have an explicit width". See the float section (9.5) in Visual Formatting Model. If no width is set, the results can be unpredictable.