Internet Explorer 6 and 7: floated elements expand to 100% width when they contain a child element floated right. Is there a workaround?

Question

I\'ve got a parent div floated left, with two child divs that I need to float right.

The parent div should (if I understand th

Answer 1

Something you could start with is this:

<DIV style="BORDER: #0c0 10px solid; FLOAT: left; MARGIN-LEFT: 100%;">
<DIV style="BORDER: #00c 10px solid;FLOAT: right;">
Tester 1
</DIV>
<DIV style="BORDER: #c0c 10px solid;FLOAT: right;">
Tester 2
</DIV>
</DIV>

The result of that seems to be at least in the ballpark of what you're looking for. Obviously, you'd want to tweak it for your needs, and probably add some css logic to only apply it to browser < IE 7.

If that's not exactly what you're looking for, try playing with some negative margins.

Answer 2

I had the same problem and solved in by positioning the child element (which I wanted to float right) with position:absolute and right:0. I gave the parent element enough right padding to make room for the child element... Worth a shot, might not work for all applications!